反応中のテーブルに入れ子になったjsonデータを表示する

Question

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）を返す必要があります。未定義、配列またはその他の無効なオブジェクトが返された可能性があります。

私は間違っているとは何ですか？

Answer 1

ここでバインディングを行っている理由がわかりません。サブ行は小道具を介してデータにアクセスします。

いずれの場合でも、レンダリングでは何もしません。実際にレンダリングするために何かを返す必要があります。