Javascript 通过状态中断CSS更改样式

所以我一直在学习如何反应

并且一直在学习状态/道具和动态变化的事物。因此，我将组件上设置的状态设置为：

  constructor(props) {
    super(props);
    this.modifyStyle = this.modifyStyle.bind(this);
    this.state = {
      navigation: [
        { route: "/", title: "Home" },
        { route: "/about", title: "About Me" },
        { route: "/portfolio", title: "Portfolio" },
        { route: "/contact", title: "Contact" },
        { route: "/", title: "Services" },
      ],
      styling: "nav",
    };
  }

请注意“样式化”状态

这用于为列表元素提供如下样式：

render() {
return (
  <div>
    <div className="trigram">
      <p>&#x2630;</p>
    </div>
    <ul className={this.state.styling}>
      {this.state.navigation.map((items) => (
        <NavItem route={items.route} title={items.title} />
      ))}
    </ul>
  </div>
);

它与相关的li样式一起在网页上生成以下内容：

[！[菜单截图][1][1]

在“滚动”事件中，可以使用以下功能将列表样式更改为较小的样式：

指定给状态的“nav2”样式应与主菜单样式相同，但具有较低的填充

.nav2 {
  width: 100%;
  float: left;
  list-style: none;
  padding: 5px;
  transition: 1s;
}

函数被调用，一切都按预期进行。风格改变了。然而，由于某些原因，更新后的样式完全中断，并且看起来像这样：

[！[截图问题][2][2]

我不知道为什么会发生这种情况，似乎再多的CSS调试也解决不了这个问题。 样式将不会在这里玩游戏

我想这与React处理状态的方式有关，但我不是很确定。任何帮助都将不胜感激

短暂性脑缺血发作 [1]:

---

[2] ：

不是回答问题，是CSS

---

通过推广“li”标记css解决了这个问题。不针对特定类指定它

当您在浏览器的调试工具中检查DOM时，

元素的

类是什么？因此它是默认的“nav”开头，然后滚动更改为“nav2”，然后听起来好像React代码正在做它应该做的事情。还是我在问题中遗漏了什么？在这里，React没有做你期望的事情到底是怎么回事？从描述上看，你似乎只是有CSS样式问题，与显示的代码或提出的问题完全无关。是的，React代码正在工作，我想我诚实地说，这个问题的措辞有点不正确。但是，css样式将不起作用。完全看起来，再多的调试都不会产生我想要的效果。它打破了列表，你是否知道任何CSS的细微差别，可能导致这一点？如果问题只是与样式，那么你是在错误的地方寻找。所有JavaScript代码都不相关。更新问题以添加一个包含相关HTML和CSS的示例，以演示问题，以及您期望从该CSS中获得的行为描述以及原因。
  componentDidMount() {
    document.addEventListener("scroll", this.modifyStyle, true);
  }
  modifyStyle = () => {
    this.setState({
      styling: "nav2",
    });
  };

.nav2 {
  width: 100%;
  float: left;
  list-style: none;
  padding: 5px;
  transition: 1s;
}