Передача объекта в качестве реквизита jsx

У меня есть объект, содержащий несколько общих реквизитов для ключевого значения, которые я хочу передать некоторым jsx. Что-то вроде этого:

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps />

Я хочу, чтобы это работало как прохождение отдельных реквизитов:

<MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/>

Это возможно?

Ответы

Это возможно?

Да, почему вы думаете, что это невозможно, но то, как вы отправляете, неверно.

Значение <MyJsx commonProps/>:

<MyJsx commonProps={true} />

Поэтому, если вы не укажете какое-либо значение по умолчанию, это будет true. Чтобы передать объект, вам необходимо написать его следующим образом:

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps={commonProps} />

Обновить:

Если у вас есть объект и вы хотите передать все свойства в качестве отдельной опоры, напишите его так:

<MyJsx {...commonProps} />

Для этого вы можете использовать оператор распространения.

You can simply do <MyJsx {...commonProps} />

Теперь, что все индивидуальные свойства, которые у вас есть в commonProps, будут отправлены как отдельные опоры для MyJsx

Вам нужно использовать двойные фигурные скобки, например:

messages={{tile:'Message 1'}}

Или передать много объектов:

messages={[{title:'Message 1', name: 'Andrew'}, {title:'Message 2', name: 'Greg'}]}

Это просто синтаксис JS внутри фигурных скобок.

Конечный компонент может выглядеть следующим образом:

<Chat title="Some str" messages={[{title:'Message 1', name: 'Andrew'}, {title:'Message 2', name: 'Greg'}]} />

Почему бы и нет?

Просто выполните <MyJsx propName: {commonProps}/>.