REACT.JS:如何遍历所有NavBar按钮并移除它们的类，并将“活动”类添加到所单击的按钮中

React.js是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，使得开发者可以将界面拆分成独立的、可复用的组件，从而提高代码的可维护性和可重用性。

要遍历所有NavBar按钮并移除它们的类，并将“活动”类添加到所单击的按钮中，可以按照以下步骤进行操作：

创建一个React组件，用于渲染NavBar和按钮。在组件的state中，定义一个属性来保存当前活动按钮的索引。
在组件的render方法中，使用map函数遍历按钮数据，并渲染每个按钮。为每个按钮添加一个点击事件处理函数。
在点击事件处理函数中，使用setState方法更新当前活动按钮的索引。这将触发组件的重新渲染。
在组件的render方法中，根据当前活动按钮的索引，为对应的按钮添加“活动”类，同时移除其他按钮的类。

下面是一个示例代码：

import React, { Component } from 'react';

class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeButtonIndex: null
    };
  }

  handleClick(index) {
    this.setState({ activeButtonIndex: index });
  }

  render() {
    const buttons = ['按钮1', '按钮2', '按钮3']; // 按钮数据

    return (
      <div className="navbar">
        {buttons.map((button, index) => (
          <button
            key={index}
            className={index === this.state.activeButtonIndex ? 'active' : ''}
            onClick={() => this.handleClick(index)}
          >
            {button}
          </button>
        ))}
      </div>
    );
  }
}

export default NavBar;

在上述代码中，我们使用了一个数组buttons来存储按钮的文本内容。在render方法中，我们使用map函数遍历buttons数组，并为每个按钮添加了点击事件处理函数handleClick。在点击事件处理函数中，我们使用setState方法更新activeButtonIndex属性，从而触发组件的重新渲染。

在渲染每个按钮时，我们根据当前活动按钮的索引，为对应的按钮添加了active类，以突出显示当前活动按钮。其他按钮则没有添加该类。

这样，当用户点击某个按钮时，该按钮将被突出显示为活动状态，其他按钮则恢复为非活动状态。

关于React.js的更多信息，你可以参考腾讯云的React.js产品介绍页面：React.js产品介绍