Reactjs REACT.JS：如何循环所有导航栏按钮，删除它们的类并添加；主动的；将类设置为单击的按钮

我试图用React.js制作一个简单的导航栏。我发现自己的问题是在所有导航按钮上循环，删除“活动”类名，然后在单击的按钮上添加“活动”

我设法在单击的元素上创建一个状态，将“active”切换为

true

，然后在

className

属性中执行以下If语句：

className={this.state.active？“导航项目导航链接active”：“导航项目导航链接”}

以下是完整的代码：

import React, { Component } from 'react';

class NavButton extends Component {
    state = {
        active: false
    }

    setActive = () => {
        this.setState({
            active: !this.state.active
        })
    }

    render() {
        return (
            <a 
            className={this.state.active ? "nav-item nav-link active" : "nav-item nav-link"} 
            href={this.props.href}
            onClick={this.setActive}> {this.props.title} 
            </a>
        )
    }
}

class NavBar extends Component {

    buttons = [
        {
            title: "Home",
            key: 0
        },
        {
            title: "Team",
            key: 1
        },
        {
            title: "Discord",
            key: 2
        },
        {
            title: "Gallery",
            key: 3
        },
        {
            title: "Download",
            key: 4
        }
    ]

    render() {
        return (
            <nav className="navbar" id="navbarMain">
                <div></div>
                <div className="navbar-nav flex-row">
                    {this.buttons.map(button => <NavButton title={button.title} key={button.key} />)}
                </div>
                <div></div>
            </nav>
        )
    }
}

export default NavBar

import React，{Component}来自'React'；
类NavButton扩展组件{
状态={
活动：错误
}
setActive=（）=>{
这是我的国家({
活动：！this.state.active
})
}
render（）{
返回(
)
}
}
类导航栏扩展组件{
按钮=[
{
标题：“家”，
关键字：0
},
{
标题：“团队”，
关键词：1
},
{
标题：“不和谐”，
关键词：2
},
{
标题：“画廊”，
关键词：3
},
{
标题：“下载”，
关键词：4
}
]
render（）{
返回(
{this.buttons.map（button=>）}
)
}
}
导出默认导航栏

这只适用于一个元素（不介意活动状态变为

false

，当它为

true

时）。问题是，我如何以React方式删除所有其他按钮中的活动类名

对于纯JS，我没有问题，我只是循环所有具有类名“navbar item”的元素，并将它们的类名设置为没有“active”，然后向按下的元素添加“active”，如本例所示

你们能不能帮我一下，告诉我做这件事最好的反应方式是什么

---

非常感谢！

这些用例的一种常见模式是将相关状态保留在父级中，以便父级（导航栏）跟踪哪个子级（导航按钮）处于“活动”状态。然后导航按钮可以成为一个无状态组件，以“活动”作为道具

const-NavButton=（{active，title，href，onSetActive}）=>{
返回(
{title}
)
}
类NavBar扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
activeIndex:0，//保持活动索引处于状态
按钮：[
{
标题：“家”，
关键字：0
},
{
标题：“团队”，
关键词：1
},
{
标题：“不和谐”，
关键词：2
},
{
标题：“画廊”，
关键词：3
},
{
标题：“下载”，
关键词：4
}
]
}
}
handleChangeActive（newActiveIndex）{
this.setState（{activeIndex:newActiveIndex}）；
}
render（）{
const{activeIndex}=this.state；
返回(
{this.state.buttons.map（（button，buttonIndex）=>
/*根据activeIndex状态确定哪个导航按钮处于活动状态*/
this.handleChangeActive（buttonIndex）}active={buttonIndex===activeIndex}title={button.title}key={button.key}/>）}
)
}
}
ReactDOM.render（，document.querySelector（#app”）；

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
李{
利润率：8px0；
}
氢{
字体大小：粗体；
边缘底部：15px；
}
.完成{
颜色：rgba（0,0,0,0.3）；
文字装饰：线条贯通；
}
输入{
右边距：5px；
}
.nav-item.nav-link{
背景：灰色；
}
.nav-item.nav-link.active{
背景：红色；
}

---

我会将您的状态和逻辑移动到

导航栏

组件。它将负责存储和设置当前活动按钮，并将其作为道具传递给所有按钮

class NavBar extends Component {
  state = {
    activeButtonIndex: null;
  }

  buttons = [
    {
      title: "Home",
      key: 0
    },
    {
      title: "Team",
      key: 1
    },
  ];

  renderButton = (button, index) => (
    <NavButton 
      {...button} 
      isActive={this.state.activeButtonIndex === index}
      setActive={() => this.setState({ activeButtonIndex: index })}
    />
  );

  render() {
    return (
      <nav className="navbar" id="navbarMain">
        <div className="navbar-nav flex-row">
          {this.buttons.map((button, index) => this.renderButton(button, index)}
        </div>
      </nav>
    );
  }
}

const NavButton = ({ isActive, setActive, href, title }) => (
  <a 
    className={isActive ? "nav-item nav-link active" : "nav-item nav-link"} 
    href={href}
    onClick={setActive}
  >
    {title} 
  </a>
);

类导航栏扩展组件{
状态={
activeButtonIndex:空；
}
按钮=[
{
标题：“家”，
关键字：0
},
{
标题：“团队”，
关键词：1
},
];
renderButton=（按钮，索引）=>(
this.setState（{activeButtonIndex:index}）
/>
);
render（）{
返回(
{this.buttons.map（（按钮，索引）=>this.renderButton（按钮，索引）}
);
}
}
const NavButton=（{isActive，setActive，href，title}）=>(
);

wow非常感谢，伙计！解释得很好，代码也很清楚，工作非常完美！标记为正确答案抱歉再次打扰，尽管我不明白为什么其他按钮会关闭？如果我们将activeIndex设置为单击按钮的索引，为什么其他未单击的元素的activeIndex返回false？循环浏览按钮列表时，每个按钮都有不同的索引（

buttonIndex

）。第一个将有索引0，然后是索引1等。其中只有一个将与您保存为

activeIndex

的索引相等。当您更改状态

activeIndex

时，另一个

按钮index

将是与

activeIndex

匹配的。希望有意义。您在

中使用的函数映射
（或
.forEach
）将当前项作为第一个参数接收，将当前索引作为第二个参数接收。（还传递了第三个参数，包含整个数组）。请尝试在浏览器控制台中粘贴
[“a”、“b”、“c”]。forEach（console.log）
。对于每个项，它都会