ReactJs:响应状态变化改变状态

Question

我有一个带输入的React组件和一个可选的"高级输入":

[ basic ]
Hide Advanced...
[ advanced ]

如果单击"隐藏高级"(更改为"显示高级"),则底部的高级版将消失.这很简单,工作正常,showAdvanced状态中的一个键控制文本以及是否呈现高级输入.

但是,外部JS代码可能会更改高级的值,在这种情况下,我想显示[高级]输入,如果它当前被隐藏且值不同于默认值.但是,用户应该能够单击"隐藏高级"以再次关闭它.

所以,有人打电话给cmp.setState({advanced: "20"})我,然后我想表现出先进性; 最直接的做法就是showAdvanced在我的状态下更新.但是,似乎没有办法更新某些状态以响应React中的其他状态更改.我可以想到一些行为略有不同的变通方法,但我真的想要有这种特定的行为.

我应该将showAdvanced移动到道具,这有意义吗？你可以根据状态变化改变道具吗？谢谢.

Answer 1

好的,首先,您提到组件外的第三方可能会打电话cmp.setState()？这是一个巨大的反应禁忌.组件应该只调用它自己的setState函数 - 外面没有任何东西可以访问它.

另外要记住的是,如果你为了应对状态变化而再次尝试改变状态 - 这意味着你做错了什么.

当你以这种方式构建东西时,它会使你的问题变得比它需要的更难.原因是如果你接受外部没有任何东西可以设置组件的状态 - 那么基本上你唯一的选择就是允许外部事物更新组件的道具 - 然后在组件内部对它们作出反应.这简化了问题.

因此,例如,您应该查看过去曾经调用过的任何外部事物,cmp.setState()而是React.renderComponent再次调用您的组件,给出一个新的prop或prop值,例如showAdvancedset to true.然后,您的组件可以对此作出反应componentWillReceiveProps并相应地设置其状态.这是一段代码示例:

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>
        );
    }
});

因此,第一次调用React.renderComponent(MyComponent({}), elem)组件时将挂载,高级div将被隐藏.如果单击组件内的按钮,它将切换并显示.如果你需要强制组件从组件外部显示高级div,只需再次调用render:React.renderComponent(MyComponent({showAdvanced: true}), elem)它将显示它,无论内部状态如何.同样,如果你想从外面隐藏它,只需用它来调用它showAdvanced: false.

上面代码示例的额外奖励是调用setState内部componentWillReceiveProps不会导致另一个渲染周期,因为它捕获并更改状态BEFORE render被调用.有关更多信息,请查看此处的文档:http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops

不要忘记renderComponent在已安装的组件上再次调用不会再次安装它,它只是告诉您更新组件的props反应,然后做出反应,然后进行更改,运行生命周期并渲染组件的功能并执行它的dom diffing magic .