有了这个组件,每次更新时都会像往常一样调用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?我希望我没说错,_
发布于 2018-07-29 08:20:46
问题是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
)。
https://stackoverflow.com/questions/51576187
复制相似问题