Pass reagieren Komponente als Requisiten

Question

Können sagen, ich habe:

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> 
) 

Im Inneren des Tabs Komponente this.props hat die Eigenschaften

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

Kinder [0] (this.props.children) wird wie folgt aussehen

$$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 

Kinder [0] .props sieht aus wie

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

Schließlich Kinder Objekt sieht aus wie (das ist, was ich weitergeben möchte):

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

Die Frage ist, ob ich MultiTab umschreiben wie diese

<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> 

Im Inneren des Tabs Komponente

this.props.children sieht genauso aus wie oben.

children[0].props sieht aus wie

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

ich die pass Eigenschaft aussehen soll. Oben wird nur die Statement-Funktion ausgegeben.

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

Das ist seltsam Frage, aber lange Geschichte, die ich eine Bibliothek bin mit und das ist, was es ankommt.

Answer 1

this.props.children Verwendung ist die idiomatische Weise instanziiert Komponenten zu einer Komponente reagieren passieren

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

Wenn Sie eine Komponente als Parameter direkt übergeben, übergeben Sie es nicht instanziierten und instanziiert es, indem sie es aus den Requisiten abruft. Dies ist eine idiomatische Methode, Komponentenklassen weiterzuleiten, die dann von den Komponenten in der Baumstruktur instanziiert werden (z. B. wenn eine Komponente benutzerdefinierte Stile für ein Tag verwendet, aber der Verbraucher wählen soll, ob dieses Tag ein div oder span ist). :

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}/> 

Wenn Sie das tun, was wollen, können Sie das tun, um eine Kinder-ähnliche Parameter als Stütze passieren ist:

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

Denn Immobilien in Reaktion sind nur regelmäßige Objekteigenschaften JavaScript und kann jeden Wert enthalten - sei es eine Zeichenfolge, Funktion oder ein komplexes Objekt.