如何在React中为数组的第三个元素添加className

当然可以实现给特定子元素或ID设置类名的需求！在React里，最推荐的是用状态驱动视图的方式来实现，也可以直接操作DOM（不过这种方式一般不推荐，后面会解释原因）。下面结合你的代码一步步说明：

方法一：状态驱动的类名控制（React推荐方案） #

这种方式完全遵循React的设计思路，通过状态变化来自动更新视图，不会出现DOM和状态不一致的问题。

修改步骤： #

1. 更新state初始化：添加一个highlightedIndex状态，用来标记需要高亮的列表项索引（第三个元素的索引是2，因为数组从0开始计数）。
2. 完善jumpTo方法：点击按钮时，把highlightedIndex设为2。
3. 动态绑定类名：渲染列表项时，判断当前项的索引是否等于highlightedIndex，如果是就添加目标类名。

修改后的完整代码： #

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      highlightedIndex: null // 新增状态，标记要高亮的索引
    }
  }

  jumpTo() {
    // 点击按钮时，将第三个元素（索引2）设为高亮目标
    this.setState({ highlightedIndex: 2 });
  }

  componentDidMount() {
    axios.get('https://api.spacexdata.com/v2/launches')
      .then((response) => {
        this.setState({ items: response.data })
      })
      .catch((err) => {
        console.log('Error:', err);
      })
  }

  render() {
    const List = this.state.items.map((b, i) => 
      // 动态判断类名：如果当前索引等于highlightedIndex，添加blue-bg类
      <li 
        key={i} 
        id={'fn' + i}
        className={i === this.state.highlightedIndex ? 'blue-bg' : ''}
      > 
        Flight Number: {b.flight_number} and Mission_name: {b.mission_name}
      </li> 
    );

    return (
      <div>
        <button onClick={this.jumpTo.bind(this)}>高亮第三个项目</button>
        <ul> {List} </ul>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

别忘了在CSS里定义blue-bg类：

.blue-bg {
  background-color: blue;
  color: white;
}

方法二：直接操作DOM（不推荐） #

如果你一定要通过ID来操作元素，也可以直接获取DOM元素并添加类名，但这种方式会绕过React的虚拟DOM，可能导致视图和状态不一致，所以只在特殊场景下使用。

修改jumpTo方法即可：

jumpTo() {
  // 通过ID获取第三个元素（id是fn2）
  const targetItem = document.getElementById('fn2');
  if (targetItem) {
    targetItem.classList.add('blue-bg');
  }
}

总结 #

优先选择方法一，因为它完全符合React的状态驱动理念，代码更可维护，也不会出现意外的视图不一致问题。

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