Question

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

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

let selected = default[0];

在尝试访问通过Cannot read property 'name' of undefined设置的名称prop时，这会给我一个错误selected.name。

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

我是新来的反应者，因此我们将不胜感激。

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}。每次更改时都会重新渲染。

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

1 个答案: