Javascript Girl
  1. Javascript Girl
  3. Réagissez: pourquoi le composant enfant ne se met-il pas à jour lorsque l'atout change
Intereting Posts
Une façon d'avoir du texte dans div remplit une forme de triangle? Comment remplacer \ n avec <br /> en JavaScript? Obtenez widgetVar avec JavaScript ou cochez / décochez toutes les autres cases PrimeFaces Comment détecter si le support du navigateur spécifiait css pseudo-classe? Comment empêcher un navigateur de revenir en arrière dans l'histoire lorsque vous faites défiler horizontalement? Est-il possible de créer un caractère générique pour un nom d'attribut avec un attribut de caractère générique? Canvas toDataURL () renvoie l'image vierge uniquement dans Firefox Chain multiple "then" dans jQuery.when Réglez la position du caret juste après l'élément inséré dans un contenuEditable div La validation de formulaire Magento ne fonctionne que sur la dernière case dans un groupe Masquer les lignes basées sur le contenu d'une cellule – Google Spreadsheet Les attributs de données personnalisés HTML5 "fonctionnent" dans IE 6? Compte de mots-clés Javascript pour tout élément de DOM donné Quelle est la durée maximale pratique pour l'identification HTML? Lire le fichier XML en utilisant JavaScript dans Chrome

Réagissez: pourquoi le composant enfant ne se met-il pas à jour lorsque l'atout change

Pourquoi, dans l'exemple de pseudo-code suivant, l'enfant ne redémarre pas lorsque le conteneur change foo.bar? 

Container { handleEvent() { this.props.foo.bar = 123 }, render() { return <Child bar={this.props.foo.bar} /> } Child { render() { return <div>{this.props.bar}</div> } }

Même si j'appelle forceUpdate() après avoir modifié la valeur dans Container, Child affiche encore l'ancienne valeur.

Parce que l'enfant ne redémarre pas si les accessoires du parent changent mais si l'ETAT change 🙂

Ce que vous affichez est ceci: https://facebook.github.io/react/tips/communicate-between-components.html

Il passera des données de parent à enfant par des accessoires, mais il n'y a pas de logique de rerender ici.

Vous devez définir un état sur le parent puis rerender l'enfant sur l'état de changement parent. Cela pourrait vous aider. https://facebook.github.io/react/tips/expose-component-functions.html

Selon le composant React philosophie, il ne peut pas changer ses accessoires. Ils devraient être reçus du parent et devraient être immuables. Seul le parent peut changer les accessoires de ses enfants.

Belle explication sur l' état et les accessoires

Aussi, lisez ce sujet Pourquoi je ne peux pas mettre à jour les accessoires dans react.js?

Utilisez la fonction setState. Donc, vous pourriez faire 

  this.setState({this.state.foo.bar:123})

À l'intérieur de la méthode d'événement de la poignée.

Une fois, l'état est mis à jour, il déclenchera des changements et le re-rendu aura lieu.

Vous devez utiliser la fonction setState . 

 Container { handleEvent= () => { // use arrow function //this.props.foo.bar = 123 //You should use setState to set value like this: this.setState({foo: {bar: 123}}); }; render() { return <Child bar={this.state.foo.bar} /> } Child { render() { return <div>{this.props.bar}</div> } } }

Votre code semble pas valide. Je ne peux pas tester ce code.