面试题：React中如何使用Refs获取列表元素并操作其样式

Question

假设有一个React列表，每个列表项是一个 <li> 元素，使用React的Refs机制，如何获取到特定的 <li> 元素，并为其添加一个 'active' 类名以改变样式。请写出实现思路及关键代码。

Answer 1

实现思路

1. 在React组件中创建一个 ref 对象，用于引用特定的 <li> 元素。
2. 为需要获取的 <li> 元素添加 ref 属性，将其指向创建的 ref 对象。
3. 通过 ref 对象获取该 <li> 元素，然后使用 classList 属性为其添加 active 类名。

关键代码

import React, { useRef, useEffect } from 'react';

const ListComponent = () => {
  const specificLiRef = useRef(null);

  useEffect(() => {
    if (specificLiRef.current) {
      specificLiRef.current.classList.add('active');
    }
  }, []);

  return (
    <ul>
      <li ref={specificLiRef}>特定列表项</li>
      <li>其他列表项</li>
      <li>其他列表项</li>
    </ul>
  );
};

export default ListComponent;