react获取dom的方法

在 React 中，获取 DOM 的方法主要有以下几种：

1. 使用 ref 属性

在组件中添加 ref 属性，可以在组件的 componentDidMount 或 componentDidUpdate 生命周期方法中通过 this.refs.xxx 获取到该组件的 DOM 节点。

例如：

class MyComponent extends React.Component {
  componentDidMount() {
    const node = this.refs.myRef;
    // do something with node
  }
  render() {
    return <div ref="myRef">Hello World</div>;
  }
}

2. 使用回调函数

在组件中添加回调函数作为 ref 属性的值，当组件挂载后，回调函数会被调用，并将组件的 DOM 节点作为参数传递给该函数。

例如：

class MyComponent extends React.Component {
  handleRef = (node) => {
    // do something with node
  }
  render() {
    return <div ref={this.handleRef}>Hello World</div>;
  }
}

3. 使用 React.createRef()

React.createRef() 方法可以创建一个 ref 对象，该对象可以在组件的 constructor 中创建，并在 render 方法中传递给组件的 DOM 元素。

例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    const node = this.myRef.current;
    // do something with node
  }
  render() {
    return <div ref={this.myRef}>Hello World</div>;
  }
}

以上三种方法都可以用来获取组件的 DOM 节点，具体使用哪种方法取决于场景和个人偏好。