Übergeben Sie die Reaktionskomponente als Requisiten

Nehmen wir an, 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>
);

Innerhalb der Tabs-Komponente this.props hat die Eigenschaften

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

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

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

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

Schließlich sieht das Children-Objekt so aus (das möchte ich übergeben):

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

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

Innerhalb der 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 will das pass Eigentum aussehen. Oben druckt nur die Statement-Funktion aus.

$$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 eine seltsame Frage, aber lange Geschichte Ich benutze eine Bibliothek und darauf läuft es hinaus.

Verwenden this.props.children ist der idiomatische Weg, um instanziierte Komponenten an eine reagierende Komponente zu übergeben

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 direkt als Parameter übergeben, übergeben Sie sie ohne Instanziierung und instanziieren sie, indem Sie sie von den Requisiten abrufen. Dies ist eine idiomatische Art, Komponentenklassen weiterzugeben, die dann von den Komponenten im Baum instanziiert werden (z. B. wenn eine Komponente benutzerdefinierte Stile für ein Tag verwendet, aber den Verbraucher wählen lassen möchte, ob dieses Tag ein ist div oder 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}/>

Wenn Sie einen kinderähnlichen Parameter als Requisite übergeben möchten, können Sie dies tun:

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

Schließlich sind Eigenschaften in React nur normale JavaScript-Objekteigenschaften und können jeden Wert enthalten – sei es eine Zeichenfolge, eine Funktion oder ein komplexes Objekt.

Wie in der akzeptierten Antwort erwähnt, können Sie die spezielle Eigenschaft { props.children } verwenden. Sie können jedoch eine Komponente einfach als Requisite übergeben, wenn der Titel dies erfordert. Ich denke, das ist manchmal sauberer, da Sie vielleicht mehrere Komponenten übergeben und an verschiedenen Stellen rendern möchten. Hier ist die Reaktionsdokumentation mit einem Beispiel dafür, wie es geht:

https://reactjs.org/docs/composition-vs-inheritance.html

Stellen Sie sicher, dass Sie tatsächlich eine Komponente und kein Objekt passieren (das hat mich anfangs gestolpert).

Der Code ist einfach dieser:

const Parent = () => { 
  return (
    <Child  componentToPassDown={<SomeComp />}  />
  )
}

const Child = ({ componentToPassDown }) => { 
  return (
    <>
     {componentToPassDown}  
    </>
  )
}

In meinem Fall habe ich einige Komponenten (type_of_FunctionComponent) in ein Objekt gestapelt wie:

[
 {...,one : ComponentOne},
 {...,two : ComponentTwo}
]

dann habe ich es an einen animierten Slider übergeben, und in der Slide-Komponente habe ich Folgendes getan:

const PassedComponent:FunctionComponent<any> = Passed;

dann benutze es:

<PassedComponent {...custom_props} />

Ich musste Komponenten bedingt rendern, also hat mir Folgendes geholfen:

const Parent = () => { 
  return (
    <Child  componentToPassDown={<SomeComp />}  />
  )
}

const Child = ({ componentToPassDown }) => { 
  return (
    <>
     {conditionToCheck ? componentToPassDown : <div>Some other code</div>}
    </>
  )
}

Wie wäre es mit “React.createElement(component, props)” aus dem React-Paket

const showModalScrollable = (component, props) => {
 Navigation.showModal({
   component: {
     name: COMPONENT_NAMES.modalScrollable,
     passProps: {
        renderContent: (componentId) => {
          const allProps = { componentId, ...props };

          return React.createElement(component, allProps);
    },
  },
},

}); };