如何让React组件在每次状态改变时都调用一个函数？
如何让React组件在每次状态改变时都调用一个函数？
提问于 2018-07-29 08:06:31
有了这个组件，每次更新时都会像往常一样调用getDisplay (因此，当单击时会隐藏)：
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { show: true }
}
getDisplay = () => this.state.show ? 'block' : 'none';
getStyle = () => { { display: this.getDisplay() } }
render = () => <div style={{ display: this.getDisplay() }} onClick={() => { console.log('clicked'); this.setState({ show: false }) }}>
<p>TEST</p>
</div >
}这里的问题是:当我将呈现元素移动到一个数组中，然后在呈现函数中返回该数组时，它可以工作，但只有在初始化该数组时才会调用getDisplay函数，而不是每次都调用，所以在这种情况下，单击并不会隐藏
class Example extends React.Component {
array = []
constructor(props) {
super(props);
this.state = { show: true }
//getDisplay is called here instead of getting called on every render/state change.
this.array.push(
<div style={{ display: this.getDisplay() }} onClick={() => { console.log('clicked'); this.setState({ show: false }) }}>
<p>TEST</p>
</div >
)
}
getDisplay = () => this.state.show ? 'block' : 'none';
getStyle = () => { { display: this.getDisplay() } }
render = () => this.array
}这是我正在开发的应用程序的一个最小示例，我需要将保存html元素的数组分开，并使渲染函数返回它。如何在第二个代码示例中的每个状态更改时调用getDisplay？我希望我没说错，_
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51576187
复制相关文章
相似问题