ReactJs: changement d'état en réponse à la modification de l'état de

Bon tout d'abord, vous mentionner que d'un tiers à l'extérieur de votre composant pourrait appeler cmp.setState()? C'est un énorme réagir no-no. Un composant ne doit jamais appeler son propre setState fonction - rien à l'extérieur doit pouvoir y accéder.

Aussi une autre chose à retenir est que si vous essayez de modifier l'état de nouveau en réponse à un changement d'état - cela signifie que vous faites quelque chose de mal.

Lorsque vous générez les choses de cette manière, il rend votre problème beaucoup plus difficile qu'il doit être. La raison en est que si vous acceptez que rien d'extérieur peut définir l'état de votre composant, puis, fondamentalement, la seule option que vous avez est de permettre à des choses extérieures pour mise à jour de votre composant accessoires - et puis réagir à l'intérieur de votre composant. Cela simplifie le problème.

Ainsi, par exemple, vous devriez chercher à avoir quelle que soit externe choses que l'habitude d'appeler cmp.setState() plutôt appeler React.renderComponent sur votre composant de nouveau, donner une nouvelle prop ou prop valeur, tels que showAdvanced ensemble de true. Votre composant peut alors réagir à cette componentWillReceiveProps et de l'ensemble de l'état en conséquence. Voici un exemple de code:

var MyComponent = React.createClass({
    getInitialState: function() {
        return {
            showAdvanced: this.props.showAdvanced || false
        }
    },
    componentWillReceiveProps: function(nextProps) {
        if (typeof nextProps.showAdvanced === 'boolean') {
            this.setState({
                showAdvanced: nextProps.showAdvanced
            })
        }
    },
    toggleAdvancedClickHandler: function(e) {
        this.setState({
            showAdvanced: !this.state.showAdvanced
        })
    },
    render: function() {
        return (
            <div>
                <div>Basic stuff</div>
                <div>
                    <button onClick={this.toggleAdvancedClickHandler}>
                        {(this.state.showAdvanced ? 'Hide' : 'Show') + ' Advanced'}
                    </button>
                </div>
                <div style={{display: this.state.showAdvanced ? 'block' : 'none'}}>
                    Advanced Stuff
                </div>
            </div>
        );
    }
});

Donc la première fois que vous appelez React.renderComponent(MyComponent({}), elem) le composant de montage et de l'avancée de la div sera caché. Si vous cliquez sur le bouton à l'intérieur du composant, il bascule et de montrer. Si vous avez besoin de forcer le composant de montrer l'avancé de la div de l'extérieur de la composante appelez simplement de rendre à nouveau comme suit: React.renderComponent(MyComponent({showAdvanced: true}), elem) et il va le montrer, indépendamment de l'état interne. De même, si vous voulait le cacher de l'extérieur, il suffit de l'appeler avec showAdvanced: false.

Bonus ajouté à l'exemple de code ci-dessus est que l'appel à setState à l'intérieur de componentWillReceiveProps ne cause pas un autre render cycle, comme elle l'attrape, et les changements de l'état AVANT de render est appelé. Jetez un oeil à la doc pour plus d'info: http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops

N'oubliez pas que l'appel à renderComponent de nouveau sur un déjà monté composant ne pas monter de nouveau, il dit juste réagir à la mise à jour du composant props et de réagir pourra alors effectuer les modifications, exécutez le cycle de vie et rendre les fonctions de l'élément et de le faire dom comparaison de la magie.

OriginalL'auteur Mike Driver