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

Question

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

Answer 1

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

使用 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' />

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

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

Answer 2

<ChildComponent {...props} />

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

Pass prop that has a dynamic name in react to child component

javascript

reactjs

react-props