Reactjs 在渲染中更改状态参数是否违反模式？

若组件中的状态发生变化，我需要制作简单的切换动画。但我不想每次react调用组件渲染时都显示此动画。我找到了一种方法，但我不喜欢在不设置state的情况下直接更改state变量，并在render中实现它。我也不喜欢每次在动画中生成新关键点的想法。我认为这是反模式的。我怎样才能以不同的方式达到相同的结果

onClick() {
    if(this.props.items.length>=5) {
        this.setState({
            toggleWarning: true
        });

    }else {
        this.props.onStepAdd();
    }
}

render() {
    let toggle = "";
    let toggleKey = null;
    if(this.state.toggleWarning) {
        toggle = " "+style.toggleMsg;
        toggleKey = {key:Math.random()};
        this.state.toggleWarning = false;
    }

    return (
        <div>
            <h1>Add New</h1>
            <div>
                <Button
                    onClick={this.onClick}
                    label="Add Step"
                />
            </div>
            <div
                className={style.noteMsg + toggle}
                {...toggleKey} >
                <h3>Note: You can create only up to 5 steps for form wizard</h3>
            </div>
        </div>
    );
}

---

不确定我是否理解目标，但如果您希望在单击后添加类，然后在一段时间后删除该类：

previousTimeout = undefined
onClick = () => {
  if(this.props.items.length>=5) {
    this.setState({toggleWarning: true});
    clearTimeout(this.previousTimeout);
    this.previousTimeout = setTimeout(() => {
      this.setState({toggleWarning: false})
    }, 500);
}

render() {
  ...className={style.noteMsg + this.state.toggleWarning ? ' '+style.toggleMsg : ''}
}

---

你为什么不使用setState？当只有一个项时，为什么需要随机化键？直接在setState函数之外改变状态是反模式的。如果你分享了你的动画代码，也许我们可以回答得更好。我怀疑您希望动画代码有一个回调，在完成时调用一些toggleWarning回调，将您的状态值切换回false。