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

Question

我在 react 中有这段代码:

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 做同样的事情，而不是指定我想要打印的值，这样我就可以再次动态构建一个表，而不必担心破坏表。我怎样才能在 React 中做到这一点？

我认为它会像常规的 javascript 一样，我会做类似的事情

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

但我不知道如何在这种情况下使用 React 和 json 来做到这一点。

Answer 1

这是使标题和行更加动态的一种方法。获取 movies 中的第一个项目并从中提取 Object.keys(用作 header )。根据键动态生成 header 。将这些键和电影传递给GridRows并在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>
        );
    }
});

请注意，这并没有考虑带有下划线 movie_title 的属性，但您可以将一个更完整的函数大写，在空间上进行分割并将相同的逻辑映射到属性上以生成 电影标题