ReactJS：如何为列表项添加激活类并点击切换显隐状态

嘿，我来帮你搞定这个切换列表的问题！你现在的需求是点击同一列表项就能切换它的展开/收起状态，同时给激活项加上active类对吧？咱们一步步调整代码：

核心思路调整 #

你原来的activeState其实没必要单独维护，我们可以直接通过activeItem的状态来判断：

• 如果点击的项已经是当前激活项（prevState.activeItem === item），就把activeItem设为null，实现收起效果
• 如果点击的项不是当前激活项，就把activeItem设为当前项，实现展开效果

这样一次点击就能同时完成状态切换和激活类的控制，不用单独处理两个状态。

修改后的完整代码 #

export default class ToggleList extends React.Component{
  constructor(props){
    super(props); // 把props传给super，避免后续访问this.props出问题
    this.state = {
      activeItem: null
      // 移除多余的activeState，用activeItem直接判断状态
    };
  }

  onItemActive(item) {
    // 使用函数式setState，确保拿到最新的状态（setState是异步操作）
    this.setState(prevState => ({
      activeItem: prevState.activeItem === item ? null : item
    }));
  }

  render() {
    let itemsArray = [
      "Lorem ipsum dolor?",
      "consectetur adipiscing elit?",
      "commodo consequat?",
      "Excepteur sint occaecat?"
    ];

    let items = itemsArray.map( (item, index) => {
      return ( 
        <ToggleListItem 
          key={index} 
          item={item} 
          onItemActive={this.onItemActive.bind(this)} 
          active={item === this.state.activeItem} 
        /> 
      );
    });

    return(
      <div className="flex-grid">
        <div className="flex-grid-1">
          <div className="flex-grid-header">
            <h3>{this.props.title}</h3>
          </div>
        </div>
        <div className="flex-grid-2 faq-list">
          <div className="toggleList">
            <ul>
              {items}
            </ul>
          </div>
        </div>
      </div>
    )
  }
}

class ToggleListItem extends React.Component {
  constructor(props){
    super(props);
  }

  setActive() {
    this.props.onItemActive(this.props.item);
  }

  render() {
    let item = this.props.item;
    return (
      <li 
        className={this.props.active ? 'active' : ''} 
        onClick={this.setActive.bind(this)}
      >
        <div className="item-title">
          <p>{item}</p>
        </div>
        <div className="toggle-icon-wrapper">
          <div className="toggle-icon"></div>
        </div>
        {/* 根据active属性控制内容显示/隐藏，也可以用CSS类实现（更推荐） */}
        <div className="toggleList-content" style={{ display: this.props.active ? 'block' : 'none' }}>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
          </p>
        </div>
      </li>
    );
  }
}

关键修改点说明 #

1. 移除多余的activeState：用activeItem是否等于当前项来判断激活状态，减少状态冗余，避免状态不同步问题
2. 函数式更新setState：React的setState是异步操作，直接用this.state可能拿到旧值，函数式更新能确保我们基于最新状态修改
3. 控制内容显隐：给toggleList-content加上条件显示逻辑，你也可以用CSS类来实现（更符合前端最佳实践），比如：

.toggleList-content {
  display: none;
}
li.active .toggleList-content {
  display: block;
}

4. 修正super调用：在ToggleList的构造函数里把props传给super，避免后续访问this.props出现异常
5. 移除无用属性：删掉了原来代码中未使用的data-selected属性，简化代码

这样修改后，点击同一列表项就能切换它的展开/收起状态，同时active类也会正确添加和移除啦！

内容的提问来源于stack exchange，提问作者ST80