gpt4 book ai didi

javascript - ReactJs:改变状态以响应状态变化

转载 作者:数据小太阳 更新时间:2023-10-29 05:10:12 26 4
gpt4 key购买 nike

我有一个带有输入的 React 组件,以及一个可选的“高级输入”:

[ basic ]
Hide Advanced...
[ advanced ]

如果您单击“隐藏高级”,底部的高级将消失,这将更改为“显示高级”。这很简单并且工作正常,状态中有一个 showAdvanced 键控制文本以及是否呈现高级输入。

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

所以,有人外部调用cmp.setState({advanced: "20"}),然后我想显示高级;最直接的做法就是在我的状态下更新 showAdvanced。但是,似乎没有办法更新某些状态以响应 React 中的其他状态更改。我可以想到许多行为略有不同的解决方法,但我真的很想拥有这种特定行为。

我应该将 showAdvanced 移动到 props,这有意义吗?你能改变 Prop 以响应状态变化吗?谢谢。

最佳答案

好的,首先,您提到组件外部的第三方可能会调用 cmp.setState()?这是一个巨大的 react 禁忌。一个组件应该只调用它自己的 setState 函数——外面的任何东西都不应该访问它。

另外要记住的另一件事是,如果您尝试再次更改状态以响应状态更改 - 这意味着您做错了什么。

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

因此,例如,您应该考虑让过去调用 cmp.setState() 的任何外部事物再次调用您的组件上的 React.renderComponent,给出一个新 Prop 或 Prop 值,例如 showAdvanced 设置为 true。然后您的组件可以在 componentWillReceiveProps 中对此使用react并相应地设置它的状态。下面是一段代码示例:

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,只需像这样再次调用渲染:React.renderComponent(MyComponent({showAdvanced: true}), elem) 它将显示它,无论内部状态如何。同样,如果您想从外部隐藏它,只需使用 showAdvanced: false 调用它即可。

上述代码示例的额外好处是,在 componentWillReceiveProps 中调用 setState 不会导致另一个渲染周期,因为它会在 render 之前捕获并更改状态 被调用。查看此处的文档以获取更多信息:http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops

不要忘记在已经安装的组件上再次调用 renderComponent 不会再次安装它,它只是告诉 React 更新组件的 props 然后 React 将进行更改,运行生命周期并呈现组件的功能,并执行它的 dom 差异魔术。

关于javascript - ReactJs:改变状态以响应状态变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25798803/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com