傳遞具有動態名稱的道具以響應子組件

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