所以我一直在学习反应。

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

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

“样式”状态的css如下:

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

该网站在网页上制作了以下内容，以及相关的li造型:

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

其想法是在“滚动”事件上使用以下函数将列表样式更改为较小的样式:

  componentDidMount() {
    document.addEventListener("scroll", this.modifyStyle, true);
  }
  modifyStyle = () => {
    this.setState({
      styling: "nav2",
    });
  };

分配给该状态的“NAV2”样式应与主菜单样式相同，但具有较低的填充。

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

函数被调用，一切都按预期工作。样式改变了。然而，由于某种原因，更新后的造型完全被打破了，看起来就像这样:

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

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

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

TIA[1]:https://i.stack.imgur.com/bk1dt.png[2]:https://i.stack.imgur.com/w7wh2.png