react中如何获取真实的dom

在 React 中,获取真实的 DOM 元素通常通过 ref 来实现。ref 是一个特殊的属性,用于引用组件或 DOM 元素的实例。你可以通过 ref 获取到组件的真实 DOM 元素或组件实例。

1. 函数组件中的 useRef

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

示例:函数组件中的 useRef 用法
javascript 复制代码
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 用法
javascript 复制代码
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 元素可能更简单。

    示例:

    javascript 复制代码
    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 还可以用来获取类组件的实例。

示例:获取类组件实例
javascript 复制代码
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 元素。因此,在 componentDidMountuseEffect 中使用 ref 时,要确保渲染已经完成。

总结:

  • 函数组件 中,使用 useRef 来获取真实的 DOM 元素。
  • 类组件 中,使用 React.createRef() 来获取真实的 DOM 元素。
  • ref 用于访问 DOM 元素或组件实例,可以用于获取值、控制焦点或执行其他 DOM 操作。
相关推荐
吞掉星星的鲸鱼10 分钟前
使用高德api实现天气查询
前端·javascript·css
lilye6613 分钟前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
....49213 分钟前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
zhougl9962 小时前
html处理Base文件流
linux·前端·html
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)4 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之5 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端