使用React JS中的onClick复制组件

Question

假设我有一个应用程序，它看起来像这样：

<>
<Component />
<button>Add New Component</button>
</>

如何使每次单击按钮时都会附加一个新的<Component />？当我们显示或隐藏组件时，这不是有条件的渲染，而是添加无限数量的新组件的可能性。你有什么想法吗？

Answer 1

一般的工作流程是将组件数据(或仅标识符(存储在状态中的数组中。然后在阵列上进行映射以渲染Component列表。该按钮将向数组添加一个新的标识符/数据集。

const App = () => {
const [list, setList] = useState([0]);
const addComponent = () => {
setList([...list, list.length]);
};
return (
<>
{list.map(id => <Component key={id} />)}
<button onClick={addComponent}>Add New Component</button>
</>
)
};

这是一个非常简单的例子。事实上，你可能想为密钥分配唯一的id，并可能将其与更多的数据打包为对象，但你已经明白了。