Podania/Dostęp rekwizyty w bezstanowym składnikiem dziecięcej

Question

Wiem, że można przekazać wszystkim reagować komponenty rekwizyty to komponent dziecko tak:

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

Ale jak można następnie pobrać te rekwizyty jeżeli składnik dziecko jest bezpaństwowcem? Wiem, że jeśli jest to komponent klasy, można uzyskać do niego dostęp jako this.prop.whatever, ale co przekazujesz jako argument do elementu bezstanowego?

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

Answer 1

Poszukujesz składni nazwanego argumentu es6 (która jest po prostu destrukturyzacją)?

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

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

Optionnally jest drugi argument do funkcji w zależności od tego, czy określony kontekstdla komponentu lub nie.

Być może byłoby bardziej pomocne w linkach do docs. Jak stwierdzono w pierwszym artykule o składników funkcjonalnych. Jakiekolwiek rekwizyty przekazane do komponentu są reprezentowane jako obiekt przekazany jako pierwszy argument do twojego składnika funkcjonalnego.

Aby przejść nieco dalej, o notacji spreadów w jsx.

Kiedy piszesz w części:

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

Co komponent otrzyma to obiekt plai który wygląda następująco:

{ prop1: value1, prop2: value2 } 

(Zauważ, że nie jest to mapa, ale obiekt z tylko ciągi jako klucze).

Więc kiedy używasz składni posmarować obiektu JS jest skutecznie skrót do tego

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

jest równoważna

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

I rzeczywiście kompiluje do

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

I oczywiście możesz mieć wo składnie, ale uważaj na kolejność. Bardziej szczegółowa składnia (prop = value) musi być ostatnia: bardziej szczegółowe instrukcje są ostatnie.

Jeśli zrobić:

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

To kompiluje do

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

Jeśli tak (czego chyba powinien)

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

kompiluje do

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

Gdzie rozszerza się * Obiekt.przypisać (lub polyfill, jeśli nie jest obecny).

Aby pójść dalej, naprawdę polecam poświęcić trochę czasu na obserwowanie wydajności Babel z ich online editor. Jest to bardzo interesujące, aby zrozumieć, jak działa jsx, i bardziej ogólnie, jak można zaimplementować składnię es6 za pomocą narzędzi es5.

Answer 2

Kiedy piszesz

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

ze wszystkich rekwizytów, które są przechodzących do childComponent dopiero demontażu struktury dostać tylko someProp. Jeśli liczba rekwizytów, których chcesz użyć w ChildComponents, można policzyć (kilka) spośród całkowitej liczby dostępnych rekwizytów, destrukcja jest dobrym rozwiązaniem, ponieważ zapewnia lepszą czytelność.

Załóżmy, że chcemy uzyskać dostęp do wszystkich rekwizytów w składniku dziecko wtedy nie musisz używać {} wokół argumentu, a następnie można go używać jak props.someProp

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

Answer 3

Ale jak można następnie pobrać te rekwizyty jeśli element potomny jest bezpaństwowcem?

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

---

ChildComponent posiada nazwę i props będzie argumentem w składni funkcji strzałki tak jak trzeba:

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

Jeśli Babel-to będzie stworzyć coś podobnego to:

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

Answer 4

Dla Z jakiegoś powodu, co wydaje się działać dla mnie jest odmianą Shubham's answer above:

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

Answer 5

myślałem, że chciałbym dodać prosty ES2015, demontażu struktury składni używam przejść wszystkie rekwizyty od rodzica funkcjonalnej funkcjonalnym składnikiem dziecięcej.

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

Albo jeśli mam wiele obiektów (rekwizyty rodzica plus cokolwiek innego), chcę przekazywane do dziecka jako rekwizyty:

składnia

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

Ten rozpad jest podobna do powyższych odpowiedzi, ale w ten sposób przekazuję rekwizyty wraz z komponentami funkcjonalnymi i myślę, że jest naprawdę czysty. Mam nadzieję, że to pomoże!

Answer 6

To świetna taktyka do redukcji nadmiaru kodu. Oto przykład z 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> 
    } 
} 

Jeśli robię, <ParentClass getCallBackFunc={() => this.getCallBackFunc()} />, lub jeśli to zrobię <ParentClass date={todaysdatevar} />, rekwizyty getCallBackFunc lub date będzie dostępny do klasy SomeComponent.

Źródło: 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> 
}