react中如何获取真实的dom

在 React 中，获取真实的 DOM 元素通常通过 ref 来实现。ref 是一个特殊的属性，用于引用组件或 DOM 元素的实例。你可以通过 ref 获取到组件的真实 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 会指向 元素本身，你可以通过它访问 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 元素（在此例中是 元素）。
• 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 元素的引用。

5. 注意事项

• 避免过度使用 ref：在 React 中，ref 是一种“逃逸机制”，它绕过了 React 的数据流和状态管理。尽量避免在没有必要的情况下使用 ref，推荐使用 React 的状态和 props 来管理数据和交互。
• ref 只在渲染完成后有效：ref 只能在组件渲染完成后访问到 DOM 元素。因此，在 componentDidMount 或 useEffect 中使用 ref 时，要确保渲染已经完成。

总结：

• 在 函数组件 中，使用 useRef 来获取真实的 DOM 元素。
• 在 类组件 中，使用 React.createRef() 来获取真实的 DOM 元素。
• ref 用于访问 DOM 元素或组件实例，可以用于获取值、控制焦点或执行其他 DOM 操作。