如何从数组引用JSX组件道具？

Question

我在数组中有JSX组件，并希望通过访问数组中的它们来引用它们的道具和状态。

let default = [
    <Space name="1" />,
    <Space name="2" color="#ffffff" />
]

let selected = default[0];  

这给我一个错误Cannot read property 'name' of undefined当尝试通过执行selected.name来访问我设置的名称道具时， Cannot read property 'name' of undefined 。

我还尝试使用常规对象数组（ [new Space('1', '#ffffff'), etc] ），并使用地图进行渲染，但这虽然使我可以直接从数组访问道具，但我无法从render方法访问道具。

我是新来的反应者，因此可以提供任何帮助。

Answer 1

正确的方法是：将这两件事分开。 声明像这样的对象数组： const default = [{name: "Godzilla Firefox"}, {name: "Metallica"}]或不声明对象： const default = ["Samsung", "Apple"] 。 然后，您可以在Array中创建一个映射。 const data = default.map(value ⇒ <Space key={value} name={value} />) 。 这样，您可以轻松访问值。 因此，放入您的渲染方法{data} 。 每次更改时都会重新渲染。