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.
Pracujesz ze składnikiem funkcjonalnym składnikiem lub klasy? – prosti
Tak - moja konfiguracja jest taka, jak stwierdziłem w oryginalnym poście – Paulos3000