Passing/Доступ реквизита в безгосударственного компонента детской

Question

Я знаю, вы можете передать все это реагировать компоненты реквизита на его дочерний компонент, как это:

const ParentComponent =() => (
    <div> 
    <h1>Parent Component</h1> 
    <ChildComponent {...this.props} /> 
    </div> 
) 

Но как же тогда получить эти реквизита, если ребенок компонент является лицом без гражданства? Я знаю, если это компонент класса, вы можете просто получить к ним доступ как this.prop.whatever, но что вы передаете в качестве аргумента в компонент без гражданства?

const ChildComponent = ({ *what goes here?* }) => (
    <div> 
     <h1>Child Component</h1> 
    </div> 
) 

Answer 1

Вы ищете синтаксис аргумента es6 с именем (который просто разрушает)?

const ChildComponent = ({ propName }) => (
    <div> 
    <h1>Child Component</h1> 
</div> 
) 

const ChildComponent = (props) => (// withoud named, arguments 
    <div> 
    <h1>Child Component</h1> 
</div> 
) 

Optionnally есть второй аргумент вашей функции в зависимости от указания ли вы контекста для компонента или нет.

Возможно, было бы полезно wityh ссылки на docs. Как указано в первой статье о функциональных компонентах . Независимо от того, какие реквизиты передаются компоненту, он представлен как объект, переданный как первый аргумент вашему функциональному компоненту.

Чтобы перейти немного дальше, о распространении нотации внутри jsx.

Когда вы пишете в компоненте:

<Child prop1={value1} prop2={value2} /> 

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

{ prop1: value1, prop2: value2 } 

(Обратите внимание, что это не карта, а объект с только строки как ключи).

Так что, когда вы используете распространения синтаксис с объектом JS это эффективно ярлык к этому

const object = { key1: value1, key2: value2 } 
<Component {...object}/> 

эквивалентно

<Component key1={value1} key2={value2} /> 

И на самом деле компилирует

return React.createElement(Component, object); // second arg is props 

И вы можете, конечно, иметь t wo, но будьте осторожны с порядком. Более конкретный синтаксис (prop = value) должен быть последним: более конкретная инструкция приходит последней.

Если вы:

<Component key={value} {...props} /> 

Он компилирует

React.createElement(Component, _extends({ key: value }, props)); 

Если вы (то, что вы, вероятно, следует)

<Component {...props} key={value} /> 

Он компилирует в

React.createElement(Component, _extends(props, { key: value })); 

Где распространяется * Объект.присваивать (или полиполнять, если нет).

Чтобы идти дальше, я бы порекомендовал некоторое время наблюдать за выходом Вавилона с их online editor. Это очень интересно понять, как работает jsx, и в более общем плане, как вы можете реализовать синтаксис es6 с помощью инструментов es5.

Answer 2

Когда вы пишете

const ChildComponent = ({ someProp }) => (
    <div> 
     <h1>Child Component {someProp}</h1> 
    </div> 
) 

Из всех устоев, которые вы передаете в childComponent вы просто получить уничтожение того только someProp. Если количество реквизитов, которые вы хотите использовать в ChildComponents, является счетным (несколько) среди общего количества доступных реквизитов, деструктурирование является хорошим вариантом, поскольку обеспечивает лучшую читаемость.

Предположим, вы хотите, чтобы получить доступ ко всем реквизита в компоненте ребенка, то вам не нужно использовать {} вокруг аргумента, а затем вы можете использовать его как props.someProp

const ChildComponent = (props) => (
    <div> 
     <h1>Child Component {props.someProp}</h1> 
    </div> 
) 

Answer 3

Но как же тогда получить эти реквизита если дочерний компонент не имеет гражданства?

const ChildComponent = ({ *what goes here?* }) => (
    <div> 
     <h1>Child Component</h1> 
    </div> 
) 

---

ChildComponent содержит имя и props будет аргументом в синтаксисе функции стрелка так же, как вам нужно:

const ChildComponent = props => (
    <div> 
    <p>{props.value ? props.value : "No value."}</p> 
    </div> 
); 

Если Бабель-то он будет создавать что-то вроде это:

var ChildComponent = function ChildComponent(props) { 
    return React.createElement(
    "div", 
    null, 
    React.createElement(
     "p", 
     null, 
     props.value ? props.value : "No value." 
    ) 
    ); 
}; 

Answer 4

Для какая-то причина, что, кажется, работают для меня является вариацией на Shubham's answer above:

const ChildComponent = props => (
    <div> 
     <h1>Child Component {props[0].someProp}</h1> 
    </div> 
) 

Answer 5

Я думал, что я хотел бы добавить простой ES2015, уничтожение синтаксис я использую, чтобы передать все подпорки от функционального родительского функционального компонента ребенка.

const ParentComponent = (props) => (
    <div> 
    <ChildComponent {...props}/> 
    </div> 
); 

Или, если у меня есть несколько объектов (реквизит родителей, а также что-нибудь еще), я хочу передаюсь ребенку в качестве реквизита:

синтаксиса

const ParentComponent = ({...props, ...objectToBeAddedToChildAsProps}) => (
    <div> 
    <ChildComponent {...props}/> 
    </div> 
); 

Этих деструктурирующих похож на вышеуказанные ответы, но это то, как я передаю реквизит вместе с функциональными компонентами, и я думаю, что это действительно чисто. Я надеюсь, что это помогает!

Answer 6

Это отличная тактика для уменьшения раздувания кода. Вот пример с ParentClass.js:

import React from 'react'; 
import SomeComponent from '../components/SomeComponent.js'; 

export default class ParentClass extends React.Component { 
    render() { 
     <div> 
      <SomeComponent 
       {...this.props} 
      /> 
     </div> 
    } 
} 

Если я, <ParentClass getCallBackFunc={() => this.getCallBackFunc()} />, или если я <ParentClass date={todaysdatevar} />, реквизит getCallBackFunc или date будет доступен SomeComponent класса.

Источник: https://zhenyong.github.io/react/docs/transferring-props.html

Answer 7

const ParentComponent = (props) => (
    <div> 
    <h1>Parent Component</h1> 
    <ChildComponent {...props} /> 
    </div> 
); 

const ChildComponent = ({prop1, ...rest}) =>{ 
    <div> 
    <h1>Child Component with prop1={prop1}</h1> 
    <GrandChildComponent {...rest} /> 
    </div> 
} 

const GrandChildComponent = ({prop2, prop3})=> { 
    <div> 
    <h1>Grand Child Component with prop2={prop1} and prop3={prop3}</h1> 
    </div> 
}