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

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

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

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

Возможно ли это?

108
Sabrina 3 Мар 2018 в 09:54

4 ответа

Лучший ответ

Возможно ли это?

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

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

<MyJsx commonProps={true} />

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

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

< Сильный > Update :

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

<MyJsx {...commonProps} />
77
Mayank Shukla 3 Мар 2018 в 07:17

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

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'}]} />
9
sharp 4 Дек 2018 в 12:41

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

Вы можете просто сделать <MyJsx {...commonProps} />

Теперь все ваши индивидуальные свойства в CommonProps будут отправлены MyJsx как отдельные реквизиты.

25
Kaspar Lee 20 Дек 2019 в 19:36

Вы можете передать реквизит как объект двумя способами:

Const commonProps = {myProp1: 'prop1', myProp2: 'prop2'};

Оператор спреда 1.Using: -

<MyJsx {...commonProps} />

2. Просто передайте, что реквизит: -

<MyJsx commonProps = {commonProps ? commonProps : true} />
3
sneha 25 Апр 2019 в 09:41