React 获取DOM的几种方式(详细总结)

在React中，获取DOM元素的常用方式有以下几种：

1. 使用ref属性（React.createRef()或者回调函数）
2. 使用useRef Hook（在函数组件中）
3. 使用forwardRef和useImperativeHandle自定义ref

1. 使用ref属性

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}>Hello, world!</div>;
  }
}

或者使用回调函数：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = null;
  }
 
  componentDidMount() {
    console.log(this.myRef); // 获取DOM元素
  }
 
  render() {
    return <div ref={el => this.myRef = el}>Hello, world!</div>;
  }
}

2. 使用useRef Hook

function MyComponent() {
  const myRef = React.useRef();
 
  React.useEffect(() => {
    console.log(myRef.current); // 获取DOM元素
  }, []);
 
  return <div ref={myRef}>Hello, world!</div>;
}

3. 使用forwardRef和useImperativeHandle

const MyComponent = React.forwardRef((props, ref) => {
  React.useImperativeHandle(ref, () => ({
    getDomElement: () => console.log(myDiv.current)
  }));
 
  const myDiv = React.useRef(null);
 
  React.useEffect(() => {
    if (ref) {
      ref.current.getDomElement();
    }
  }, [ref]);
 
  return <div ref={myDiv}>Hello, world!</div>;
});

使用MyComponent时：

const myRef = React.createRef();
 
React.useEffect(() => {
  myRef.current.getDomElement();
}, [myRef]);
 
return <MyComponent ref={myRef} />;

以上代码展示了如何在React组件中获取DOM元素的不同方法。