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

Question

所以我一直在学习 React。

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

  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

Answer 1

不是 React 问题，是 CSS。

问题已通过泛化“li”标签得到解决 css。没有针对特定的 class

指定它

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

ReactJS changing styles via State breaks CSS

html

javascript

css

web-frontend

reactjs