react如何获取元素

获取 DOM 元素的方法

在 React 中获取 DOM 元素通常使用 ref 机制。以下是几种常见方式：

使用 useRef Hook（函数组件）

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

function MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    console.log(myRef.current); // 获取到的 DOM 元素
    myRef.current.focus(); // 示例：自动聚焦输入框
  }, []);

  return <input ref={myRef} />;
}

使用 createRef（类组件）

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current); // 获取到的 DOM 元素
  }

  render() {
    return <div ref={this.myRef}>内容</div>;
  }
}

回调形式的 ref（适用于所有组件）

function MyComponent() {
  let myRef;

  const setRef = (element) => {
    myRef = element;
    console.log(myRef); // 获取到的 DOM 元素
  };

  return <button ref={setRef}>按钮</button>;
}

获取多个元素的方法

动态绑定 ref（列表场景）

function ListComponent() {
  const itemsRef = useRef([]);

  useEffect(() => {
    console.log(itemsRef.current); // 所有元素的数组
  }, []);

  return (
    <ul>
      {[1, 2, 3].map((item, index) => (
        <li 
          key={index}
          ref={(el) => (itemsRef.current[index] = el)}
        >
          {item}
        </li>
      ))}
    </ul>
  );
}

注意事项

• 避免在渲染期间直接操作 ref，应在 useEffect 或生命周期方法中访问
• 函数组件中使用 useRef 会保持引用不变，而 createRef 会在每次渲染时新建引用
• 对于第三方库集成（如动画库），ref 通常是必要的交互方式