React侧边栏点击单个<li>仅加粗该项的实现问题

我来帮你搞定这个问题！你现在遇到的核心问题是：所有<li>元素都共用了同一个布尔值状态selected，所以点击时所有项都会同步切换样式。咱们只需要把状态从单个布尔值改成存储选中项的唯一标识（比如索引或者页面ID），就能实现点击单个项仅它加粗、其他项恢复正常的效果。

具体修改步骤： #

1. 调整state结构：把selected: false改成selectedIndex: null（初始没有选中项），用来存储当前选中项的索引。
2. 更新点击事件处理函数：让handleClick接收当前项的索引，点击时把selectedIndex设置为这个索引。
3. 修改样式判断逻辑：每个<li>判断自己的索引是否等于selectedIndex，相等则加粗，否则正常。

修改后的完整代码： #

export default class MainMenu extends Component {
  constructor(props){
    super(props);
    // 用selectedIndex存储选中项的索引，初始为null表示无选中项
    this.state = { selectedIndex: null };
  }

  // 接收当前点击项的索引作为参数
  handleClick = (index) => {
    // 如果点击的是已选中的项，可以取消选中；如果需要保持至少一个选中，直接赋值即可
    this.setState(prevState => ({
      selectedIndex: prevState.selectedIndex === index ? null : index
    }));
  }

  render(){
    return (
      <div className="MainMenu" >
        { Data.map( (item, index) => 
          <div key={index}>
            <h2 className="Title" >{item.group}</h2>
            <ul className="List">
              {item.pages.map((page, i) => 
                <li 
                  key={i} 
                  // 点击时传递当前项的索引i
                  onClick={() => this.handleClick(i)}
                  // 判断当前项的索引是否等于选中的索引，是则加粗，否则正常
                  style={ this.state.selectedIndex === i ? { fontWeight: 'bold' } : { fontWeight: 'normal' } }
                >
                  <Link to={page.url} className="ListItem">{page.name}</Link>
                </li>
              )}
            </ul>
          </div>
        )}
      </div>
    )
  }
}

关键细节说明： #

• 如果你的page对象有唯一ID（比如page.id），用ID代替索引会更可靠（避免列表顺序变化导致索引混乱），只需要把selectedIndex改成selectedId，点击时传递page.id，样式判断改成this.state.selectedId === page.id即可。
• 代码里的点击逻辑是“点击已选中项会取消选中”，如果希望始终保持一个选中项，直接把handleClick改成this.setState({ selectedIndex: index })就行。

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