web-dev-qa-db-fra.com

React comment mettre à jour l'état d'un autre composant?

Je suis assez nouveau pour réagir, essayant de faire fonctionner certains composants. j'ai

    ObjectA:React.createClass({
        propTypes: {
           ...

        },

        getInitialState: function() {
            return {
                myState: null
            }
        },

        updateMyState: function(value) {
           this.setState({
               myState: value
           })
        }

        render: function() {
            return (<div className="my-class">'hello' +{this.state.myState}</div>);
          }
    });

    ObjectB:React.createClass({
            propTypes: {
               ...

            },

            render: function() {
                return (<div className="my-class"><ObjectA / >

            </div>);
            }
        });

Je voudrais mettre à jour l'état d'ObjectA à partir d'ObjectB. Comment pourrais-je dans ObjectB appeler la méthode updateMyState d'ObjectA? Merci!

javascriptwebreactjsreact-nativefrontend
12
lucky_start_izumi

L'idée de base de React est le flux de données unidirectionnel. Cela signifie que les données sont uniquement partagées vers le bas d'un composant ancêtre à ses enfants via les propriétés de l'enfant. Nous laissons Flux comme les architectures et les émetteurs d'événements hors de l'équation pour cet exemple simple car ce n'est pas nécessaire du tout.

La SEULE façon de changer l'état d'un composant de l'extérieur consiste à modifier les accessoires qu'il reçoit dans la méthode de rendu du parent. donc myState vivrait réellement dans ObjectB et serait donné à ObjectA comme propriété. Dans votre exemple, cela ressemblerait à ceci:

ObjectA:React.createClass({
    propTypes: {
       ...

    },

    render: function() {
        return (<div className="my-class">'hello' +{ this.props.name }</div>);
      }
});

ObjectB:React.createClass({
    propTypes: {
       ...

    },

    getInitialState: function() {
        return {
            name: null
        }
    },

    onNameChange: function(newName) {
        this.setState({ name: newName })
    },

    render: function() {
        return (
            <div className="my-class">
                <ObjectA name={ this.state.name } />
            </div>
        );
    }
});
17
d-vine