传递具有动态名称的道具以响应子组件答案

【问题标题】：Pass prop that has a dynamic name in react to child component传递具有动态名称的道具以响应子组件
【发布时间】：2021-07-22 16:27:08
【问题描述】：

如果我有一个具有动态名称的道具，比如说myProp[regNo]，其中regNo 可以是一系列数字，（在反应开发工具中，它可以呈现为myProp5645262 我如何将该道具传递给孩子？

【问题讨论】：

你会如何在孩子身上使用它？

标签： javascript reactjs react-props

【解决方案1】：

<ChildComponent {...props} />

【讨论】：

【解决方案2】：

您可以通过this.props 或props 访问它，具体取决于您使用的是类组件还是挂钩。

使用Object.keys(props) 获取属性名称列表。然后您将能够访问该属性。

这是一个使用钩子的虚拟示例。

const MyComponent = (props) => {
  const keys = Object.keys(props); // ['myProp12345', 'myProp23456', 'apple']
  const myProps = keys.filter(name => name.startsWith('myProp')) // ['myProp12345', 'myProp23456']

  // Do whatever you want here to map your values

  const myValues = myProps.map(propName => ({
    name: propName,
    value: props[propName]
  })) // [{ name: 'myProp12345', value: 'a' }, { name: 'myProp23456', value: 'b' }]
  

  return (
    <Child myValues={myValues} />
  )
}

// ...

<MyComponent myProp12345='a' myProp23456='b' apple='c' />

编辑：再次阅读您的问题后，您似乎想按原样将这些道具传递给您的孩子。如果是这样：

const MyComponent = (props) => {
  const keys = Object.keys(props); // ['myProp12345', 'myProp23456', 'apple']
  const myPropsMap = keys.reduce((map, key) => ({
    ...map,
    [key]: props[key]
  }), {}) // {myProp12345: 'a', myProp23456: 'b'}

  // Here both of the myPropXXX are passed to this child.
  return (
    <Child {...myPropsMap} />
  )
}

// ...

<MyComponent myProp12345='a' myProp23456='b' apple='c' />

【讨论】：