我有一个父组件,<App>
:
constructor() {
super();
this.state = {
transporterPos: 0
}
this.tick = this.tick.bind(this);
}
componentDidMount() {
this.timerId = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerId);
}
tick() {
let transporterPos = this.state.transporterPos;
transporterPos++;
if (transporterPos > 7) {
transporterPos = 0;
}
this.setState({ transporterPos: transporterPos });
}
render() {
return (
<div>
<Staves transporterPos={this.state.transporterPos}/>
</div>
);
}
<Staves>
组件包含几个 <Stave>
组件,每个组件包含多个 <Note>
成分。每个<Note>
组件注入(inject)了 className
有条件的 active
属性(property)true
:
<div className="noteContainer" onClick={this.handleClick}>
<div className={"note" + (this.props.active ? ' active' : '')}></div>
</div>
handleClick()
是一种切换 <Note>
的方法的 active
属性(property)。我没有在此处包含所有代码以使其更具可读性。问题是当点击 <Note>
, 虽然它是 active
属性立即更改,条件 className
给出的样式在 setInterval
的下一个“滴答”重新呈现组件之前,“事件”的 是不可见的方法。换句话说,渲染似乎每 1000 毫秒只发生一次。我希望它立即发生。我在使用 setInterval
吗?错了吗?
编辑:
为了回应评论,这里是handleClick
方法(在 <Note>
中):
handleClick() {
this.props.toggleActive(this.props.pos);
}
这调用了 toggleActive
在<Stave>
:
toggleActive(pos) {
this.props.notes[pos].active = !this.props.notes[pos].active;
}
props.notes
这是 <App>
的一部分的 state
,传递给 <Stave>
(为了简洁起见,我没有包括在这个问题中)。
最佳答案
toggleActive(pos) {
this.props.notes[pos].active = !this.props.notes[pos].active;
}
没有触发重新渲染的原因是 this.props
是直接变异的,而不是 setState
。将 toggleActive
进一步移动到可以使用 setState
的位置。
如有必要,您可以将函数作为 prop 传递给子组件,并通过 this.props.toggleActive()
调用它
除了不触发重新渲染之外,this.props
不应该直接改变的另一个原因是,只要父级更改状态并将 props 传递给其子级,您的更改就会被覆盖。
关于javascript - 在 React 中使用 setInterval 延迟组件渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42377691/