Javascript 通过数组进行反应循环并渲染多个子组件的实例

我试图迭代数组并将字段分配给相应的子组件。 我目前的做法如下所示：

class CardExtension扩展了React.Component{
render（）{
返回(
{this.props.value}
);
}
}

类卡扩展了React.Component{
render（）{
返回(
{this.props.title}
);
}
}

定义并导入子组件后，我会将这些类的新实例推送到一个全新的数组中：

class CardContainer扩展了React.Component{
render（）{
var arr=[
{
“id”：1，
“标题”：“标题”，
“值”：“测试值”
}
]
var元素=[]；
对于（var i=0；i(
))}
);
}
}

@更新 问题是，每当我使用最新的解决方案时，我都会收到以下错误消息：相邻的JSX元素必须包装在一个封闭的标记中（39:24）工作解决方案：

import React, { Component, Fragment } from 'react';

export default class CardContainer extends React.Component {   
    render() {

        var arr = [
            {
                'id':1,
                'title':'title',
                'value':'test_value'
            }
        ]

        return (
            <div> 
                {arr.map((el, idx) => (
                    <Fragment>
                        <Card title={ el.value } />
                        <CardExtension value={ el.title } />
                    </Fragment>
                ))}
            </div>
        );
    }
}

import React，{Component，Fragment}来自'React'；
导出默认类CardContainer。组件{
render（）{
var arr=[
{
“id”：1，
“标题”：“标题”，
“值”：“测试值”
}
]
返回(
{arr.map（（el，idx）=>(
))}
);
}
}

错误消息“相邻的JSX元素必须包装在一个封闭的标记中”意味着：

和

元素需要包装在一个父标记中

现在，您可能不想将元素包装在

中（因为这样会创建不必要的DOM节点），但是，这样可以在没有额外节点的情况下对元素进行分组

下面是您的示例的一个工作解决方案，使用fragment short语法：

class CardContainer extends React.Component {   
  render() {
    var arr = [{
      'id':1,
      'title':'title',
      'value':'test_value'
    }]

    return (
      <div>
        {arr.map((el, idx) => (
          <>
            <Card title={ el.value } />
            <CardExtension value={ el.title } />
          </>
        ))}
      </div>
    );
  }
}

class CardContainer扩展了React.Component{
render（）{
var arr=[{
“id”：1，
“标题”：“标题”，
“值”：“测试值”
}]
返回(
{arr.map（（el，idx）=>(
))}
);
}
}

您不是在迭代arr吗？舞台表演从哪里来？您可以用arr替换stagestask，这样我就可以使用错误的变量命名了。现在已经纠正了

stagesTasks已替换为

arr`如果您使用arr进行迭代，请不要使用this.arr访问它。除此之外，代码看起来还可以工作。