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

【问题标题】：How to reference JSX component props from array?如何从数组中引用 JSX 组件道具？
【发布时间】：2019-10-26 08:42:38
【问题描述】：

我在一个数组中有 JSX 组件，并且想通过在数组中访问它们来引用它们的 props 和 state。

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

let selected = default[0];

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

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

我是新来的反应，所以任何帮助表示赞赏。

【问题讨论】：

要访问一个组件，您需要指定一个ref。但是组件实例通过 props 键暴露了 props。所以你必须做this.myRef.current.props.name 假设引用是用createRef创建的
我不确定你能做到这一点。你想做什么需要访问这样的属性？
@Herohtar 我正在尝试创建大富翁，而我试图通过这样做来获取有关玩家着陆位置的信息的方式是：let currentSpace = defaultProperties[this.state.position]; console.log(this.props.name + ' landed on ' + currentSpace.name + ' which is ' + (currentSpace.owned ? 'owned by ' + currentSpace.owner.name : 'unowned'));
听起来您可能应该将空间详细信息存储为普通对象，然后使用它们来渲染组件，当您需要获取详细信息时，您可以按预期从对象数组中访问它们. defaultProperties.map(item => <Space name={item.name} color={item.color} ...) 甚至 <Space {...item} />
@Herohtar 我正在这样做，但是在属性的渲染方法中，我无法访问我通过的任何道具。使用常规的 JSX，你可以为你的 props 命名（name=""、price="" 等），但使用一个类/对象，它只是 new Property(' ', ' ', ' ')，然后我无法访问它。我在互联网上找不到任何关于如何访问这些道具的信息。我是否只需要不按照 react 想要的方式通过构造函数传递道具，而只需按照常规的 JS 方式进行？

标签： javascript reactjs

【解决方案1】：

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

【讨论】：