Javascript ReactJS-在Prop中使用嵌套数组渲染贴图函数

我试图找出如何在我的道具中映射嵌套数组，并确定是否有更好的、最佳实践的方法将此逻辑拆分为单独的组件。我认为我遵循了下面的正确方法，但是在打开{嵌套映射方法的开头时收到了一个错误

错误消息：

代码：

JSX props.records.maprecord，索引=>

变成

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

---

然后在记录卡中添加{this.props.children}在它的render方法返回的JSX中的某个地方。

显示您的数据样本。fetch中的内容“感谢您的精彩解释。我不知道JSX能够在中包装对象。在您回答的最后一部分，我现在还有一些其他问题。看来我访问数组的方式不正确，正在触发数组或迭代器中的每个子级都应具有唯一的键属性错误。const Comments=props=>{console.logprops return{props.comment}{props.recordCommentId}

}是的，当返回列表/数组时，如果您为每个元素分配一个唯一的有意义的键，React可以优化DOM合并。您需要做的是沿ID添加一个键属性，在每个注释上添加一个键属性。键={props.recordCommentId}就可以了。

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