React页面加载时如何为第一个子元素添加active类？

方法一：父组件统一管理激活状态（推荐） #

你觉得用布尔prop不是最优方案，但这种状态提升是React中管理组件间状态的常规做法，逻辑清晰且易维护，完全适合你的场景。具体实现如下：

1. 修改Navigation.js，添加状态初始化和点击切换逻辑：

import React from 'react';
import ListItem from '../ListItem/ListItem';

class Navigation extends React.Component{
  constructor(props) {
    super(props);
    // 页面加载时默认激活第一个导航项
    this.state = {
      activeItem: "List item 1"
    };
  }

  handleItemClick = (label) => {
    this.setState({ activeItem: label });
  }

  render(){
    return(
      <div className="navigation">
        <ul className="navigation__ul">
          <ListItem 
            label="List item 1" 
            isActive={this.state.activeItem === "List item 1"}
            onClick={() => this.handleItemClick("List item 1")}
          />
          <ListItem 
            label="List item 2" 
            isActive={this.state.activeItem === "List item 2"}
            onClick={() => this.handleItemClick("List item 2")}
          />
        </ul>
      </div>
    )
  }
}

export default Navigation;

2. 修改ListItem.js，根据传入的isActive动态拼接类名：

import React from 'react';

function ListItem(props) {
  const { label, isActive, onClick } = props;
  // 动态生成类名，isActive为true时添加active类
  const itemClass = isActive ? "listItem active" : "listItem";
  
  return(
    <li className={itemClass} onClick={onClick}>
      <span className="listItem-label">{label}</span>
    </li>
  )
}

export default ListItem;

方法二：结合路由自动激活（路由场景适用） #

如果你的导航和页面路由绑定，可以直接通过当前路由路径判断激活项，无需手动维护状态：

1. 先安装路由依赖：npm install react-router-dom
2. 修改ListItem.js，用路由钩子判断当前路径：

import React from 'react';
import { useLocation } from 'react-router-dom';

function ListItem(props) {
  const { label, path } = props;
  const location = useLocation();
  // 对比当前路径和导航项路径，自动判断是否激活
  const isActive = location.pathname === path;
  const itemClass = isActive ? "listItem active" : "listItem";

  return(
    <li className={itemClass}>
      <a href={path} className="listItem-label">{label}</a>
    </li>
  )
}

export default ListItem;

3. 修改Navigation.js，传入对应路由路径：

import React from 'react';
import ListItem from '../ListItem/ListItem';

class Navigation extends React.Component{
  render(){
    return(
      <div className="navigation">
        <ul className="navigation__ul">
          <ListItem label="List item 1" path="/item1"/>
          <ListItem label="List item 2" path="/item2"/>
        </ul>
      </div>
    )
  }
}

export default Navigation;

这种方式下，页面加载时会自动匹配当前路由对应的导航项并添加active类。

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