Javascript 在React中迭代json属性以形成表？

我有以下代码：

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

---

但我不知道如何在这个实例中使用React和json来实现这一点。

这里有一种方法可以使标题和行更具动态性。获取

电影中的第一项

并从中提取

对象.keys

（用作标题）。根据密钥动态生成标题。将这些键和

电影

传递到

网格行

，并在

键

中显示每个属性。我还没有测试过这个，但它看起来像这样：

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

var GridTable=React.createClass({
render:function（）{
var行=[]；
var头=[]；
var first=this.props.movies[0]；
//获取要用作标题的第一个项的属性名
var keys=Object.keys（第一个）；
返回(
{keys.map（函数（标题）{
返回
})}
{this.props.movies.map（函数（电影）{
//传递按键以显示存储在每个位置的值
返回
})}
);
}
});
var GridHeaders=React.createClass({
render:function（）{
var capitaledProperty=this.props.title[0].toUpperCase（）+this.props.title.slice（1）；
返回（{capitaledProperty}）；
}
});
var GridRows=React.createClass({
render:function（）{
返回(
{this.props.keys.map（函数（键））{
返回{this.props.movie[key]}；
})}
);
}
});

---

请注意，这不包括带有下划线的属性

电影_title

，但您可以将一个更完整的函数大写，在空间上拆分，并将相同的逻辑映射到属性上，以生成

电影标题
。以下是一种使标题和行更具动态性的方法。获取
电影中的第一项
并从中提取
对象.keys
（用作标题）。根据密钥动态生成标题。将这些键和
电影
传递到
网格行
，并在
键
中显示每个属性。我还没有测试过这个，但它看起来像这样：

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

var GridTable=React.createClass({
render:function（）{
var行=[]；
var头=[]；
var first=this.props.movies[0]；
//获取要用作标题的第一个项的属性名
var keys=Object.keys（第一个）；
返回(
{keys.map（函数（标题）{
返回
})}
{this.props.movies.map（函数（电影）{
//传递按键以显示存储在每个位置的值
返回
})}
);
}
});
var GridHeaders=React.createClass({
render:function（）{
var capitaledProperty=this.props.title[0].toUpperCase（）+this.props.title.slice（1）；
返回（{capitaledProperty}）；
}
});
var GridRows=React.createClass({
render:function（）{
返回(
{this.props.keys.map（函数（键））{
返回{this.props.movie[key]}；
})}
);
}
});

请注意，这不包括带有下划线的属性
电影标题
，但您可以使大写成为一个更完整的函数，在空间上拆分并在属性上映射相同的逻辑以生成
电影标题
您是否在问如何概括您的
网格*
组件，使其不特定于电影？基本上，我想，但更具体地说，这是一种思维方式，如果我开始在电影中返回一个新的属性-值对，它将显示在表中，而无需调整json本身以外的任何其他内容。例如，我添加了
“评级”：“
作为一个属性，它将自动显示，而无需专门添加它。你是否在问如何概括你的
网格*
组件，使它们不特定于电影？我想基本上是这样的，但更具体地说，这是一种思维方式，如果我开始在电影中返回一个新的属性-值对，它将显示在表中，而无需调整json本身以外的任何其他内容。例如，我添加了
“rating”：“
作为一个属性，它将自动显示，而无需专门添加它。经过几次调整，效果非常好。谢谢。做了一些调整，效果非常好。谢谢