多个类名更改和状态更改计时器

Question

我正在尝试重写我的一个JS插件以做出反应，作为一种学习方式。

我有一个面板，当隐藏/显示时，需要使用几个类名以及一些需要等待CSS动画完成的类名（为什么要使用计时器）进行更新。

我应该如何以一种反应的方式来做到这一点？使用querySelector更改类名似乎非常错误。.？

详细说明

触发showPanel时，需要进行以下操作

• body / html元素需要更新的CSS（因此我添加了类）
• 现有的叠加层淡入（向其添加一个类）
• 显示模式div（为此添加一个类）
• 模态div被告知在动画运行后处于活动状态（因此计时器和类“ am-animation-done”）

我最好希望拥有/学习的最佳实践是在reactjs中做到这一点。我在想一个切换状态，当触发时会将状态设置为可见/隐藏，如果设置为“可见”，则发生以下类更改。我最大的问题是计时器问题。

  showPanel = () => {
            document.querySelector('body').classList.add('am-modal-locked');
            document.querySelector('html').classList.add('am-modal-locked');
            document.querySelector('.am-overlay').classList.add('fadein');
            document.querySelector('.am-modal').classList.add('am-show');

            const timer = setTimeout(() => {
                document.querySelector('.am-modal').classList.add('am-animation-done');
            }, 500);
            return () => clearTimeout(timer);
  };

  hidePanel = () => {
            document.querySelector('.am-modal').classList.remove('am-show');
            document.querySelector('.am-modal').classList.remove('am-animation-done');
            document.querySelector('.am-overlay').classList.add('fadeout');

            const timer = setTimeout(() => {
                document.querySelector('.am-overlay').classList.remove('fadein');
                document.querySelector('.am-overlay').classList.remove('fadeout');
                document.querySelector('body').classList.remove('am-modal-locked');
                document.querySelector('html').classList.remove('am-modal-locked');
            }, 500);
            return () => clearTimeout(timer);
    };

已更新源代码以进行澄清

Answer 1

您可以使用状态来动态更改组件内部的类名

className={this.state.isPanelVisible}

也许不将其设置为布尔值，而是可以将变量设置为当前所需的类。

Answer 2

与虚拟DOM一起工作，因此您应该使用状态并更改该特定元素的类，如下面的示例：

constructor(props) {
        super(props);
        this.state = {'active': false, 'class': 'album'};
    }

  handleClick(id) {
    if(this.state.active){
      this.setState({'active': false,'class': 'album'})
    }else{
      this.setState({'active': true,'class': 'active'})
    }
  }

<div className={this.state.class}  onClick={this.handleClick.bind(this.data.id}>
    <p>Data</p>
</div>

Answer 3

在非常基本的用例中，您可以在类本身内部编写逻辑。

<div className={active ? "active" : "disabled"} />

在更高级的情况下，我建议使用类似classnames的软件包。https://www.npmjs.com/package/classnames

<div className={classNames({ foo: true, bar: true, boo: false })} />

这将导致div具有类foo和bar

这主要是关于一个组件的，但是如果您真的必须影响某个东西的类，使其与主体的距离尽可能远，则很可能需要使用useQuerySelector或将状态置于较高的位置，然后根据其逻辑。] >

Answer 4

是的，这不是一个很好的方法。相反，您也应该使用状态变量来切换您的类。无需手动操作DOM。您可以在第一个setState的回调中设置超时，以再次更改状态。

Answer 5

这在React中要简单得多，这是一个带有钩子的示例