Reagieren js: Wie Requisiten in JSX Komponenten setzen, die

Question

in Variablen speichern

Angenommen ich bereits eine Komponente definieren:

class Co extends React.Component { 
    render =() => { 
     const name = this.props.name; 
     return (
      <p>Hello, my name is {name}</p> 
     ) 
    } 
} 

und speichern sie in einer Variable:

const co = <Co />; 

Wie kann ich das einstellen Komponente Requisiten mit der Variablen? Würde co.props.set funktionieren?

Answer 1

Wie ich Sie verstehen, wollen nicht machen Ihre Komponente in JSX-Syntax aber mit Ihrer gespeicherten Variable. Sie können einen Blick auf React.cloneElement werfen. Dies sollte das tun, was Sie wollen:

{React.cloneElement(co, {name: 'hans'})}

See: https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement

Answer 2

Sie können Requisiten gesetzt wie gewohnt

<Co name="Name"/> 

Wenn Element Kind von einigen Komponenten ist, dann können Sie verwenden React.cloneElement()

class Parent extends React.Component { 
    render =() => { 
     const name = this.props.name; 
     return (
      <SomeComp><Co/></SomeComp> 
     ) 
    } 
} 
class SomeComp extends React.Component { 
    render =() => { 
     const name = this.props.name; 
     return (
      <SomeComp>{React.cloneElement(this.props.children, {name:"Name"})}</SomeComp> 
     ) 
    } 
}