我有一个带有输入的React组件,以及一个可选的“高级输入”:
[ basic ]
Hide Advanced...
[ advanced ]
如果单击“隐藏高级”,则底部的高级将消失,这将变为“显示高级”。这很简单并且可以正常工作,状态中有一个showAdvanced
键可以控制文本以及是否呈现高级输入。
但是,外部JS代码可能会更改advanced的值,在这种情况下,如果当前隐藏了[进阶]输入且该值与默认值不同,我想显示[advanced]输入。但是,用户应该可以单击“隐藏高级”将其再次关闭。
因此,有人打了外部电话cmp.setState({advanced: "20"})
,然后我想显示高级;最直接的事情就是showAdvanced
在我的状态下进行更新。但是,似乎没有一种方法可以响应React中的其他状态更改而更新某些状态。我可以想到许多行为稍有不同的变通办法,但是我真的很想拥有这种特定的行为。
我应该将showAdvanced移到道具上,这有意义吗?您可以根据状态变化更改道具吗?谢谢。
好的,首先,您提到组件外部的第三方可能会打电话给cmp.setState()
?这是一个巨大的反应,禁忌。组件只能调用它自己的setState函数-任何外部都不能访问它。
还要记住的另一件事是,如果您要响应状态更改而再次尝试更改状态-这意味着您在做错事。
当您以这种方式构建事物时,它会使您的问题变得更加棘手。原因是,如果您接受外部没有任何东西可以设置组件的状态-那么基本上唯一的选择就是允许外部事物更新组件的props-然后在组件内部对其进行反应。这简化了问题。
因此,例如,您应该查看曾经调用过的所有外部事物,cmp.setState()
而不是React.renderComponent
再次调用您的组件,并给出一个新的prop或prop值,例如showAdvanced
设置为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
不会导致另一个渲染周期,因为它捕获并更改了BEFORErender
调用前的状态。在这里查看文档以了解更多信息:http : //facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops
不要忘记renderComponent
再次调用已安装的组件不会再次安装它,它只是告诉react更新组件props
,然后react将进行更改,运行生命周期并渲染组件的功能并进行dom diff魔术。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句