Javascript 如何在React中正确更新类名？

在向下滚动时，我添加和删除了某些类。我想在向上滚动时恢复类。如何仅使用ReactJS完成

我已经使用事件侦听器更改了类

主要概念是NavBar的内容应该显示在中心，当我们向下滚动时，显示在DIV中的网站名称应该显示在NavBar上，中间的内容应该向左移动，显示网站名称的DIV应该消失。 当我们使用网站名称向上滚动到div时，所有内容都应该恢复到向下滚动之前的状态

import React, { Component } from 'react';
import '../Styles/Navbar.css';

export class Navbar extends Component {

  handleScrollToElement(event) {
    let linkPosition = document.querySelector('.collapse');
    let brandName = document.querySelector('.navbar-brand');
    if (window.pageYOffset > 250){
      linkPosition.classList.remove('justify-content-center');
      linkPosition.classList.add('justify-content-end');
      brandName.classList.remove('invisible');
      brandName.classList.add('visible');
    }
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScrollToElement);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScrollToElement);
  }

  render() {
    return (
      <div>
        <nav className='navbar navbar-expand-sm bg-dark navbar-dark fixed-top'>
          <a className='navbar-brand invisible' href='#'>Website Name</a>
          <button className='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'>
            <span className='navbar-toggler-icon'></span>
          </button>
          <div className='collapse navbar-collapse justify-content-center' id='navbarSupportedContent'>
            <ul className='navbar-nav'>
              <li className='nav-item active'>
                <a className='nav-link' href='#'>Home</a>
              </li>
              <li className='nav-item'>
                <a className='nav-link' href='#'>Item 2</a>
              </li>
              <li className='nav-item'>
                <a className='nav-link' href='#'>About Us</a>
              </li>
              <li className='nav-item'>
                <a className='nav-link' href='#'>Contact</a>
              </li>
            </ul>
          </div>
        </nav>
        <div className='container-fluid hpage'>
          <div className='inner'>
            <h1 className='htext' >WEBSITE TITLE</h1>
          </div>
        </div>
      </div>
    )
  }
}

export default  Navbar;

import React，{Component}来自'React'；
导入“../Styles/Navbar.css”；
导出类导航栏扩展组件{
handleScrollToElement（事件）{
让linkPosition=document.querySelector（'.collapse'）；
让brandName=document.querySelector（'.navbar brand'）；
如果（window.pageYOffset>250）{
linkPosition.classList.remove（'justify-content-center'）；
linkPosition.classList.add（'justify-content-end'）；
brandName.classList.remove（'invisible'）；
brandName.classList.add（'visible'）；
}
}
componentDidMount（）{
window.addEventListener（'scroll'，this.handleScrollToElement）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.handleScrollToElement）；
}
render（）{
返回(










网站标题
)
}
}
导出默认导航栏；

使用React.js时，应尽可能避免直接的DOM操作。如果您确实需要对DOM的引用，则应该使用

我会将

linkPosition

和

brandName

的

classNames

设置为

constructor

中的状态，并在

handleScrollToElement

中更新它们

无论何时更改这些

状态

变量，都将调用

渲染

函数并更新视图

由于

scroll

事件在短时间内引发了大量事件，因此我也担心性能问题。因此，我在代码中添加了防止重新渲染未更改的视图

您还可以考虑取消调用的滚动事件处理程序函数，以减少调用<代码> SETSTATE< /COD> < < /P>的数量。

import React，{Component}来自'React'；
导入“../Styles/Navbar.css”；
导出类导航栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
linkPositionClassName:“验证资源中心”，
brandNameClassName:“不可见”，
};
}
handleScrollToElement（事件）{
如果（window.pageYOffset>250）{
这是我的国家({
linkPositionClassName:“证明内容结束”，
brandNameClassName:'可见'，
});
}否则{
这是我的国家({
linkPositionClassName:“验证资源中心”，
brandNameClassName:“不可见”，
});
}
}
shouldComponentUpdate（下一步，下一步状态）{
const{linkPositionClassName，brandNameClassName}=this.state；
//只有当至少一个状态发生更改时，组件才需要重新渲染
返回nextState.linkPositionClassName！==linkPositionClassName | | nextState.brandNameClassName！==brandNameClassName；
}
componentDidMount（）{
window.addEventListener（'scroll'，this.handleScrollToElement）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.handleScrollToElement）；
}
render（）{
返回(










网站标题
)
}
}
导出默认导航栏；

是否也可以发布可以运行的工作剪贴？谢谢。一个问题是导航栏中滚动前的内容没有正确居中，可以添加任何css？默认的

linkPositionClassName

是居中的。您可能需要查看css中的类名。