jsonの属性を反復してReactにテーブルを作成しますか？

Question

私が反応して、このコードを持っている：私がやりたい何

var GridTable = React.createClass({ 
    render: function(){ 
     var rows = []; 
     var headers = []; 
     this.props.movies.forEach(function(movie){ 
      headers.push(<GridHeaders movie={movie} key={movie.id}/>); 
      rows.push(<GridRows movie={movie} key={movie.id}/>); 
     }); 
     return(
      <table> 
       <thead>{headers}</thead> 
       <tbody>{rows}</tbody> 
      </table> 
     ); 
    } 
}); 
var GridHeaders = React.createClass({ 
    render: function(){ 
     return(<tr><th>{this.props.movie.key}</th></tr>); 
    } 
}); 
var GridRows = React.createClass({ 
    render: function(){ 
     return(
      <tr> 
       <td>{this.props.movie.id}</td> 
       <td>{this.props.movie.category}</td> 
       <td>{this.props.movie.title}</td> 
       <td>{this.props.movie.director}</td> 
       <td>{this.props.movie.year}</td> 
      </tr> 
     ); 
    } 
}); 
var MovieGrid = React.createClass({ 
    render: function(){ 
     return(
      <GridTable movies={this.props.movies}/> 
     ); 
    } 
}); 
var MOVIES = [ 
    { 
     "id": 1388534400000, 
     "category": "SciFi", 
     "title": "Star Wars: The Force Awakens", 
     "director": "J.J. Abrams", 
     "year": 2015 
    }, 
    { 
     "id": 1420070400000, 
     "category": "Horror", 
     "title": "The Shining", 
     "director": "Stanley Kubrick", 
     "year": 1980 
    } 
]; 
ReactDOM.render(
    <MovieGrid movies={MOVIES}/>, 
    document.getElementById("content") 
); 

は、JSONを反復し、動的にテーブルを作成するために、GridHeadersのヘッダーなどの属性をリストです。私は値を指定することは避けたいので、データは何でもかまいません。私はGridRowsで同じことをやりたいのですが、印刷したい値を指定するのではなく、テーブルを分割することを気にせずにテーブルを動的に再構築することができます。どのように私はこれをリアクションで行うことができますか？

私は私が

for(i=0; i < movies.length; i++) 

ような何かをするだろう。しかし、私が反応し、JSONと、このインスタンスでこれを行う方法がわからないんだけど、通常のJavaScriptのようなものになるだろうと思っています。

Answer 1

ヘッダーと行をより動的にする方法の1つです。 moviesの最初の項目を取得し、Object.keysをそれから引っ張ります（ヘッダーとして使用する）。キーに基づいてヘッダーを動的に生成します。これらのキーとmovieをGridRowsに渡し、それぞれのプロパティをkeysに表示します。私はこれをテストしていませんが、それはこのようなものになります。これは、アンダースコアmovie_titleとの性質を考慮していませんが、あなただけのより完全な機能を活用作ることができることを

var GridTable = React.createClass({ 
    render: function(){ 
     var rows = []; 
     var headers = []; 
     var first = this.props.movies[0]; 
     // get the property names of the first item to use as headers 
     var keys = Object.keys(first); 

     return(
      <table> 
       <thead> 
        {keys.map(function(title) { 
         return <GridHeaders key={title} title={title} /> 
        })} 
       </thead> 
       <tbody> 
        {this.props.movies.map(function(movie) { 
         // pass the keys to display values stored at each 
         return <GridRows movie={movie} keys={keys} /> 
        })} 
       </tbody> 
      </table> 
     ); 
    } 
}); 
var GridHeaders = React.createClass({ 
    render: function(){ 
     var capitalizedProperty = this.props.title[0].toUpperCase() + this.props.title.slice(1); 
     return(<tr><th>{capitalizedProperty}</th></tr>); 
    } 
}); 
var GridRows = React.createClass({ 
    render: function(){ 
     return(
      <tr> 
       {this.props.keys.map(function(key) { 
        return <td>{this.props.movie[key]}</td>; 
       })} 
      </tr> 
     ); 
    } 
}); 

注意、空間上の分割を同じロジックを生成するプロパティにマップするMovie Title