javascript - ReactJS - 在 Prop 中使用嵌套数组渲染 Map 函数

Question

我正在尝试弄清楚如何在我的 prop 中映射嵌套数组，并确定是否有更好的最佳实践方法将此逻辑拆分为单独的组件。我以为我遵循了下面的正确方法，但在打开嵌套 map 方法的 { 时收到错误。

错误消息:

ERROR in ./public/components/app/comment-box/comment.jsx
Module build failed: SyntaxError: Unexpected token, expected , (46:12)

  44 |         <div>
  45 |         { props.records.map((record, index) => <RecordCard {...record} />
> 46 |             {
     |             ^
  47 |                 { record.record_comments.map((comment, i) => 

代码:

  //GET /api/test and set to state
    class RecordsFeedContainer extends React.Component{
        constructor(props, context) {
            super(props, context);
            this.state = this.context.data || window.__INITIAL_STATE__ || {records: []};
        }

        fetchList() {
            fetch('http://localhost:3000/api/test')
                .then(res => {
                    return res.json();
                })  
                .then(data => {
                    this.setState({ records: data });
                })
                .bind(this)  
                .catch(err => {
                    console.log(err);
                });
        }

        componentDidMount() {
            this.fetchList();
        }

        render() {
            return (
                <div>
                <h2>Records List</h2>
                <ul>
                <RecordsFeed {...this.state} />
                </ul>
                </div>
            )
        }
    };

    //Loop through JSON and component
    const RecordsFeed = props => {
            return (
            <div>
            { props.records.map((record, index) => <RecordCard {...record} />
                {
                    { record.record_comments.map((comment, i) => <Comments {...comment} />)}
                }
            )}
            </div>
            )
    }

Answer 1

JSX props.records.map((record, index) => <RecordCard {...record} />

变成了

props.records.map((record, index) => {
    return React.createElement(RecordCard, ...record);
}

你的代码是

props.records.map((record, index) => {
    return React.createElement(RecordCard, ...record) { { record.record_comments.map...;
}

我猜评论应该在卡片内，对吧？那么你可以这样做:

{ props.records.map((record, index) => {
    return (
        <RecordCard {...record}>
            { record.record_comments.map((comment, i) => <Comments {...comment} /> )}
        </RecordCard>
    );
} )}

然后里面RecordCard您可以添加 {this.props.children}某处是 render方法返回 JSX。