Reactjs 如何使用React渲染数组数组？

我有一个字符串数组，比如， 项目：[a[]，b[]，c[]，d[]

我想使用React将此数组的元素渲染为旋转木马。以下代码不起作用。任何帮助都将不胜感激

public render(): React.ReactElement<IReactCarouselProps> { 
    return (  
      <div> 
       <Carousel>
              {this.state.items.map((list,key) => {
               return(
                 <div key = 'key'>
                   <div>{list.a}</div>
                 </div>
               );
                }
              )}
         </Carousel>
       </div>
    );    
  } 

public render（）：React.ReactElement{
报税表（
{this.state.items.map（（列表，键）=>{
返回(
{list.a}
);
}
)}
);    
} 

工作示例

render（）{
返回(
{this.state.items.map（（子数组，索引）=>{
返回(
{subArray.map（（子项，i）=>{
返回(

{subitem.value}

);
})}
);
})}
);
}

要渲染数组，也可以映射第二个数组。这样，您的代码将循环父数组，并循环所有子数组，以您想要的方式呈现它们

以下是一个例子：

public render(): React.ReactElement {
    const flatArray = parentArray.map(
        (childArray) => {(childArray.map((childElement) => <div>Your code here</div>)})
    );
    return (
        {flatArray} 
    );
}

public render（）：React.ReactElement{
常量flatArray=parentArray.map(
（childArray）=>{（childArray.map（（childElement）=>此处的代码）}）
);
返回(
{flatArray}
);
}

或者，更好的是，您可以使用array flat.function（），如下所示：

public render(): React.ReactElement {
    const flatArray = parentArray.flat().map((childElement) => <div>Your code here</div>)
    return (
        {flatArray} 
    );
}

public render（）：React.ReactElement{
const flatArray=parentArray.flat（）.map（（childElement）=>此处的代码）
返回(
{flatArray}
);
}

---

在此处阅读有关array.flat（）方法的更多信息：

如果它对您有帮助，请更正，如正确答案或向上投票。谢谢嗨，谢谢你的回复。当我使用flat（）时，我得到了以下错误，“属性'flat'在类型'any[]'上不存在”。我一直在尝试修复它，但找不到解决方案。这是因为array.flat（）是一个实验性功能，因此在浏览器上不支持此功能。如果您使用的是Babel或Typescript，transpiler将添加对此功能的支持（他们通常会将您的ES6代码转换为ES3代码）。您还可以在捆绑包中手动添加polyfill。我的建议是使用Typescript/Babel，或者干脆不要使用这个函数，自己管理多边形填充可能会导致错误。

public render(): React.ReactElement {
    const flatArray = parentArray.flat().map((childElement) => <div>Your code here</div>)
    return (
        {flatArray} 
    );
}