详解React中如何获取真实的dom-牛翰网

1. 函数组件中的 useRef

在函数组件中，获取 DOM 元素的引用需要使用 useRef 钩子。

示例：函数组件中的 useRef 用法

import React, { useRef } from 'react';

function MyComponent() {
  // 创建一个 ref 来引用 DOM 元素
  const inputRef = useRef(null);

  const focusInput = () => {
    // 通过 ref 访问真实的 DOM 元素，并给它添加焦点
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

export default MyComponent;

解释：

useRef 返回一个包含 .current 属性的对象，current 可以指向真实的 DOM 元素（或者组件实例，具体取决于 ref 的用途）。

在这个例子中，inputRef.current 会指向 <input> 元素本身，你可以通过它访问 DOM 元素的属性和方法（例如 focus()）。

2. 类组件中的 createRef

在类组件中，获取 DOM 元素的引用需要使用 React.createRef() 方法。

示例：类组件中的 createRef 用法

import React, { Component } from 'react';

class MyComponent extends Component {
  // 在类组件中创建 ref
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  focusInput = () => {
    // 通过 ref 访问真实的 DOM 元素，并给它添加焦点
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.focusInput}>Focus the input</button>
      </div>
    );
  }
}

export default MyComponent;

解释：

React.createRef() 用于在类组件中创建一个 ref 对象，this.inputRef.current 指向 DOM 元素（在此例中是 <input> 元素）。

focusInput 方法通过 this.inputRef.current.focus() 调用 DOM 方法来聚焦输入框。

3. 访问 DOM 元素的常见用途

获取输入框的值：你可以通过 ref 获取到输入框的值，虽然在大多数情况下，React 推荐使用受控组件来管理输入框的值，但有时直接访问 DOM 元素可能更简单。

示例：

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

  const handleSubmit = () => {
    alert(`Input value: ${inputRef.current.value}`);
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

控制焦点：ref 可以用来控制元素的焦点（如前面的例子），让用户能够交互时快速导航到特定的输入框。

DOM 操作：你还可以直接操作 DOM 元素的其他属性，如添加事件监听器、获取元素尺寸、滚动等。

4. 使用 ref 获取自定义组件的实例

除了 DOM 元素，ref 还可以用来获取类组件的实例。

示例：获取类组件实例

import React, { Component } from 'react';

class MyButton extends Component {
  clickHandler() {
    alert('Button clicked!');
  }

  render() {
    return <button onClick={this.clickHandler}>Click Me</button>;
  }
}

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

  triggerButtonClick = () => {
    this.buttonRef.current.clickHandler(); // 调用子组件的方法
  };

  render() {
    return (
      <div>
        <MyButton ref={this.buttonRef} />
        <button onClick={this.triggerButtonClick}>Trigger Child Button Click</button>
      </div>
    );
  }
}

export default ParentComponent;

解释：

this.buttonRef.current 会指向子组件 MyButton 的实例，因此你可以直接调用它的方法（如 clickHandler()）。

ref 对于类组件和函数组件的使用方式略有不同，但它们的核心思想相同：通过 ref 获取实例或 DOM 元素的引用。