ReactJS通过State Breaks CSS改变样式

编程问答 2022-08-14

问题描述

所以我一直在学习反应。

并且一直在学习有关状态/道具和动态更改事物的信息。这样，我将在组件上设置的状态设置为：

  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

解决方法

不是React问题，是CSS。

通过概括“ li”标签css来解决此问题。没有针对特定类别指定

htmljavascriptreactjsreactjsweb-frontend