Как использовать несколько свойств распространения в компоненте React?

Question

Я пишу на TypeScript. Я передаю два объекта в качестве реквизита в свой React. При поиске я вижу, что делаю это как таковое:

<MyComponent {...obj1} {...obj2} />

Но как мне потом использовать их в моем фактическом файле компонентов?

Варианты:

const MyComponent = ({ ...obj1, ...obj2 }) => {

Кажется, не работает.

Кто-нибудь знает, как это делается?

Answer 1

Когда вы выкладываете реквизит при создании элементов, вы теряете для них доступ. Рассмотрим следующее:

const foo = { a: 1, b: 2 };
const bar = { a: 3, d: 4 };
<MyComponent {...foo} {...bar}>

Вы получите:

const MyCompnent = ({ a, b, d }) => // your code

Таким образом, у вас не будет ссылок на foo и bar, потому что вы распределили и свойство a может принадлежать любому из них в зависимости от порядка распространения. Вы можете отправить foo и bar как отдельные свойства, если хотите получить к ним доступ в компоненте.

<MyComponent foo={foo} bar={bar}>