如何在每次状态更改时使React Component调用一个函数?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (70)

使用此组件,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元素的数组保持独立,并使render函数返回它。如何在第二个代码示例中的每个状态更改中调用getDisplay?

提问于
用户回答回答于

问题是this.array是静态的。在构建时,你正在构建阵列,并且从不重新访问它。不是在构造函数中构建JSX,而是使用数据填充数组,然后在渲染时映射它。

render: () => this.array.map(item => (
  /* JSX for each item goes here. */
))

请注意,b / c this.array不是状态,向其添加新项目不会自动更新它。如果你想要这种行为,请确保你a)将其存储为状态(例如this.state = { show: true, array: [] })和b)不要改变它(即不要使用.push,使用.concat)。

扫码关注云+社区

领取腾讯云代金券