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

Question

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

Answer 1

<ChildComponent {...props} />

Answer 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' />