如何将多个属性传递到两个级别的组件，同时将其名称保留在React中？

Question

我有一个组件，它有一个子组件。用户将在我的组件中设置属性，然后这些属性可以传递给我的子组件。我的组件中有几个必需的属性，还有一个属性存储用户定义的数据。

我的组件

<MyComponent onChange={onChange} hasStatus={true} customData={{data1, data2, data3}} />

子组件

const {onChange, hasStatus, customData } = props
...
<ChildComponent onChange={onChange} status={hasStatus} customData={customData} />

这样，当数据到达我的子组件时，就不能再像这样通过属性名提取customData了：

const { data1, data2 } = props

我怎么才能让他们的名字保持在第二层？

Answer 1

props.customData上存在data1和data2。要解构，请更改为：

const { data1, data2 } = props.customData

或者

const { customData } = props

这里没有一般的问题，这是你设计它的方式。数据最初存在于顶层，然后作为单个对象的属性向下传递。