Przełęcz reakcji wieloskładnikowego podpór

Question

Umożliwia powiedzieć, że mają:

import Statement from './Statement' 
import SchoolDetails from './SchoolDetails' 
import AuthorizedStaff from './AuthorizedStaff' 


const MultiTab =() => (
    <Tabs initialIndex={1} justify="start" className="tablisty"> 
    <Tab title="First Title" className="home"> 

     <Statement/> 
    </Tab> 
    <Tab title="Second Title" className="check"> 
     <SchoolDetails/> 
    </Tab> 
    <Tab title="Third Title" className="staff"> 
     <AuthorizedStaff/> 
    </Tab> 
    </Tabs> 
) 

Wewnątrz elementu Tabs this.props ma właściwości

+Children[3] 
className="tablist" 
justify="start" 

dzieci [0] (this.props.children) będzie wyglądał

$$typeof: 
Symbol(react.element) 
_owner:ReactCompositeComponentWrapper 
_self:null 
_shadowChildren:Object 
_source:null 
_store:Object 
key:null 
props:Object 
ref:null 
type: Tab(props, context) 
__proto__ 
Object 

dzieci [0] .props wygląda

+Children (one element) 
className="home" 
justify="first title" 

Wreszcie Dzieci obiekt wygląda (to jest to, co chcę przekazać):

$$typeof:Symbol(react.element) 
_owner:ReactCompositeComponentWrapper 
_self:null 
_shadowChildren:undefined 
_source:null 
_store: 
key:null 
props:Object 
__proto__:Object 
**type: function Statement()** 
ref:null 

Pytanie brzmi, czy mogę przepisać Multitab jak ten

<Tabs initialIndex={1} justify="start" className="tablisty"> 
    <Tab title="First Title" className="home" pass={Statement}/> 


    <Tab title="Second Title" className="check" pass={SchoolDetails}/> 



    <Tab title="Third Title" className="staff" pass={AuthorizedStaff}/> 


</Tabs> 

Wewnątrz komponentu Tabs

this.props.children wygląda tak samo jak powyżej.

children[0].props wygląda

classname:"home" 
**pass: function Statement()** 
title: "First title" 

Chcę własnością pass wyglądać. Powyżej po prostu wypisuje funkcję Statement.

$$typeof:Symbol(react.element) 
_owner:ReactCompositeComponentWrapper 
_self:null 
_shadowChildren:undefined 
_source:null 
_store: 
key:null 
props:Object 
__proto__:Object 
**type: function Statement()** 
ref:null 

To dziwne pytanie, ale długa historia używam biblioteki i to jest to, do czego się sprowadza.

Answer 1

Korzystanie this.props.children jest idiomatyczne sposób przekazać instancji komponentów do reagowania komponentu

const Label = props => <span>{props.children}</span> 
const Tab = props => <div>{props.children}</div> 
const Page =() => <Tab><Label>Foo</Label></Tab> 

Po przejechaniu komponent jako parametr bezpośrednio przekazać to uninstantiated i oznacz ją, pobierając go z podpór. Jest to idiomatyczny sposób przekazywania klas komponentów, który następnie zostanie utworzony przez komponenty w drzewie (np. Jeśli komponent używa niestandardowych stylów na tagach, ale chce pozwolić konsumentowi wybrać, czy ten znacznik to div lub span) :

const Label = props => <span>{props.children}</span> 
const Button = props => { 
    const Inner = props.inner; // Note: variable name _must_ start with a capital letter 
    return <button><Inner>Foo</Inner></button> 
} 
const Page =() => <Button inner={Label}/> 

Jeśli to, co chcesz zrobić, to przekazać parametr dzieci-like jako rekwizyt, można to zrobić:

const Label = props => <span>{props.content}</span> 
const Tab = props => <div>{props.content}</div> 
const Page =() => <Tab content={<Label content='Foo' />} /> 

Wszakże właściwości w React to tylko zwykłe właściwości obiektu JavaScript i może przechowywać dowolną wartość - czy to ciąg znaków, funkcja czy obiekt złożony.