如何從數組引用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} 。 每次更改時都會重新渲染。