Comment puis-je passer d'état parent à son enfant?

Je suis nouveau dans Réagissent ES6 et je pense que je suis la modification de l'état dans un mauvais sens. Mon code est comme cela lorsque j'ai mis de l'état sur le composant parent:

class App extends React.Component  {
constuctor(props)  {
     super(props);
     this.state = {name:"helloworld"};
}
 render() { 
  return( 
   <ChildComponent parentObj={this} /> //parentObj for parent context as props on child components  
  ); 
 } 
}

Mon problème est dans d'autres composants enfants, j'ai à faire, c'repeatitively, est-il une autre façon de faire? Je n'ai aucun problème à Réagir.createClass, mais je veux le code dans l'es6, donc j'ai ce problème.

Levée de l'État et la Pensée de Réagir vous montrera les plus idiomatiques façon de faire de ces sortes de choses.

OriginalL'auteur i am gpbaculio | 2017-01-16

  1. 15

    Si vous voulez passer à l'état {nom:"helloworld"} faire comme ça:

    class App extends React.Component {
constuctor(props)  {
     super(props);
     this.state = {name:"helloworld"};
}
 render() { 
  return( 
   <ChildComponent {...this.state} /> 
  ); 
 } 
}

    et dans le composant enfant que vous pouvez faire:

    <Text>{this.props.name}</Text>

    Mais Si vous voulez passer les accessoires de la composante de l'enfant:

       class App extends React.Component {
    constuctor(props)  {
         super(props);
         this.state = {name:"helloworld"};
    }
     render() { 
      return( 
       <ChildComponent {...this.props} />
      ); 
     } 
    }

    et dans le composant enfant que vous pouvez faire:

    <Text>{this.props.stuff}</Text>//place stuff by any property name in props

    Maintenant, si vous voulez mettre à jour l'état du composant parent de l'enfant du composant que vous aurez besoin de passer d'une fonction à l'enfant de composant:

     class App extends React.Component {
    constuctor(props)  {
         super(props);
         this.state = {name:"helloworld"};
    }
    update(name){
       this.setState({name:name})//or with es6 this.setState({name})
    }
    render() { 
     return( 
      <ChildComponent {...this.props, update: this.update.bind(this)} />
     ); 
    } 
  }

    puis en composant enfant, vous pouvez utiliser ceci : this.props.update('new name')

    Mise à JOUR

    utilisation plus es6 et supprimé constructeur

    class App extends React.Component {
    state = {name:"helloworld"};

    //es6 function, will be bind with adding .bind(this)
    update = name => {
       this.setState({name:name})//or with es6 this.setState({name})
    }

    render() { 
     //notice that we removed .bind(this) from the update
     return( 
      <ChildComponent {...this.props, update: this.update} />
     ); 
    } 
  }
    Je comprends cela, mais je peux faire des modifications de l'état de l'enfant composants?
    pas directement, vous pouvez passer d'une fonction, disons appeler de mise à jour, je vais modifier la réponse à vous montrer!
    est-il clair? ou c'est trop tard! :p
    désolé, j'ai été en passant de la méthode que des accessoires, mais je ne savais pas que vous pouvez utiliser bind et ce sur elle,je l'utilise sur le constructeur. Merci!!!! 🙂
    cochez cette github.com/JeffreyWay/laravel-mix/issues/76 @tylik

    OriginalL'auteur challenger

  2. 0

    si vous voulez envoyer l'ensemble de l'état :

    return( <ChildComponent {...this.state} /> );

    Mais c'est probablement une mauvaise idée 🙂

    edit: dans votre scénario, cela envoie un " nom " de la propriété de composant enfant avec la valeur 'helloworld'

    oui, je Comprends qu'il faut envoyer le nom de la propriété, mais j'ai à faire, que je peux l'utiliser.setState sur les composants enfants, il fonctionne, mais de toute façon je pense que c'est la mauvaise façon
    pourquoi est-ce une mauvaise idée?
    Si vous envoyez l'état de parent, les enfants repeatitively, alors votre modèle de composant est probablement pas très bon 🙂

    OriginalL'auteur Ji aSH