我正在尝试迭代数组并将字段分配给相应的子组件。 我目前的做法如下:
class CardExtension extends React.Component {
render() {
return (
<div>
{ this.props.value }
</div>
);
}
}
class Card extends React.Component {
render() {
return (
<div>
{ this.props.title }
</div>
);
}
}
定义并导入子组件后,我会将这些类的新实例推送到一个全新的数组中:
class CardContainer extends React.Component {
render() {
var arr = [
{
'id':1,
'title':'title',
'value':'test_value'
}
]
var elements=[];
for(var i=0;i<arr.length;i++){
elements.push(<Card title={ arr[i].value } />);
elements.push(<CardExtension value={ arr[i].title } />);
}
return (
<div>
{elements}
</div>
);
}
}
有没有办法使用以下格式来完成相同的任务
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>
);
}
}
@更新 问题是,每当我使用最新的解决方案时,我都会收到以下错误消息:相邻的 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>
);
}
}
关于javascript - React 循环遍历数组并渲染多个子组件的实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60691979/