在reactjs中的表中显示嵌套的json数据

时间:2022-03-20 14:30:58
var PersistanceLayout = React.createClass({


  render : function(){
    var jsondata = {// nested json data};



    return (<div><table border="true">
      <TableRow fullData={jsondata}/>
      </table></div>);
  }
});

var TableRow = React.createClass({
render : function() {

var TableRowData=[];

  $.each(this.props.fullData, function(i, post) {

    if(typeof post === 'object' && $.isArray(post) == true)
    {

      for(var key in post)
      {
          TableRowData.push(post[key]);
      }

    }


  }.bind(this));


        TableRowData.map(function(data, i) {
          //array or value
          if(typeof data === 'object' && $.isArray(data) == false)
          {
              return (<tr><TableElement smallData={data} key={i} /></tr>);
          }

          if(typeof data === 'object' && $.isArray(data) == true)
          {
                return (<table border="1"><TableRow fullData={data}/></table>);
          }
        }.bind(this));




  }

});

var TableElement = React.createClass({

render : function()
{

$.each(this.props.smallData, function(i, val) {

    return (<td>{val}</td>);

  });

}

});





ReactDOM.render(
        <PersistanceLayout />,
        document.getElementById('div1')
    );

The above is my code for displaying nested json in a table. But somehow I get this error : Uncaught Error: TableRow.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

以上是我在表中显示嵌套json的代码。但不知怎的,我得到这个错误:未捕获错误:TableRow.render():必须返回一个有效的React元素(或null)。您可能已经返回undefined,数组或其他一些无效对象。

What is it that I am doing wrong ?

我做错了什么?

1 个解决方案

#1


0  

Not sure why you're doing any binding here; the sub-rows will access their data via props.

不知道为什么你在这里做任何约束;子行将通过道具访问他们的数据。

In any case, you don't do anything in render; you need to actually return something to render.

无论如何,你在渲染中没有做任何事情;你需要实际返回要渲染的东西。

#1


0  

Not sure why you're doing any binding here; the sub-rows will access their data via props.

不知道为什么你在这里做任何约束;子行将通过道具访问他们的数据。

In any case, you don't do anything in render; you need to actually return something to render.

无论如何,你在渲染中没有做任何事情;你需要实际返回要渲染的东西。