reactjs - 如何使用 React 渲染数组？

Question

我有一个字符串数组，例如项目：[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>
    );    
  } 

Answer 1

工作示例https://jsfiddle.net/shuts13/cfLxrn15/6/

  render() {
    return (
      <div>
        {this.state.items.map((subArray, index) => {
          return (
            <div key={index}>
              {subArray.map((subitem, i) => {
                return (
                  <ul>
                    <li>{subitem.value}</li>
                  </ul>
                );
              })}
            </div>
          );
        })}
      </div>
    );
  }

Answer 2

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

这是一个例子：

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

或者，更好的是，您可以使用数组 flat.function()，如下所示：

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

在此处阅读有关 array.flat() 方法的更多信息：https ://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/flat