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

时间:2016-11-29 16:55:32

标签: json reactjs

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')
    );

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

我做错了什么?

1 个答案:

答案 0 :(得分:0)

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

在任何情况下,你都不会在渲染中做任何事情;你需要实际返回要呈现的东西。