时间戳

首页 > 解决方案 > 在渲染中更改状态参数是否反模式？

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

问题描述

如果组件中的状态发生更改，我需要制作简单的切换动画。但是我不想每次 react 调用组件渲染时都显示这个动画。我找到了一种方法，但我不喜欢我需要在没有 setState 的情况下直接更改状态变量并在渲染中进行。此外，我不喜欢每次在动画上生成新密钥的想法。我认为它是反模式。如何以不同的方式获得相同的结果？

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>
    );
}

标签： reactjs

解决方案

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

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 : ''}
}

推荐阅读