从数组中生成许多组件

【问题标题】：generate many components from an array从数组中生成许多组件
【发布时间】：2021-01-31 22:49:01
【问题描述】：

我有一个数组，我需要生成许多组件作为数组长度：我试过了，但没有用：

let items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];
let itemList = [];
items.forEach((item, index) => {
    itemList.push(<li key={index}>{item}</li>);
});
export default function TaskList(props) {
    return (
        <div className="task-list-container">
            <Task id="" nombre={itemList} />
        </div>
    );
}

所以我需要一个来自 TaskList 的组件，它包含 Item1 和其他 Item2 等等一个

【问题讨论】：

标签： html reactjs jsx

【解决方案1】：

这不是很清楚你要做什么......

但我认为你应该尝试在渲染部分循环而不是在变量中堆叠组件......

let items=['Item 1','Item 2','Item 3','Item 4','Item 5'];
export default function TaskList(props) {
      return (
            <div className="task-list-container">
                {
                  items.map((item, index) => <Task key={index} value={item} />)
                }
            </div>
      )
}

它将在items 数组中呈现与字符串一样多的<Task> 组件

【讨论】：

key 应该是 {index} 而不是字符串 "{index}"。