У меня есть объект, содержащий несколько общих реквизитов ключ-значение, которые я хочу передать некоторым 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} />
<MyJsx {...commonProps} />
- person Mayank Shukla; 03.03.2018
<p>{props.props.hello}</p>
- person Juan Lanus; 20.10.2018
Для этого можно использовать оператор распространения.
Вы можете просто сделать <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'}]} />
Вы можете передать реквизит как объект двумя способами:
const commonProps = {myProp1: 'prop1', myProp2: 'prop2'};
1. С помощью оператора спреда: -
<MyJsx {...commonProps} />
2.Просто передайте этот реквизит: -
<MyJsx commonProps = {commonProps ? commonProps : true} />
Также можно сделать что-то вроде этого:
<MyJsx objectProps={{
prop1,
prop2
}}/>
Таким образом, вам не нужно писать prop1: prop1 (если это переменная или функция, например state setState).
Затем к нему можно получить доступ в компоненте с помощью деструктуризации: let { prop1, prop2 } = props.objectProps
<MyJsx myObjProps={commonProps} />- person Prakash Sharma schedule 03.03.2018