• react ref获取dom节点


    React中,可以使用ref来获取DOM节点的引用。以下是一些示例代码,说明如何使用ref来获取DOM节点:

    使用React.createRef()(React 16.3版本以及更高版本的推荐方法):

    import React, { Component } from 'react';

    class MyComponent extends Component {

      constructor(props) {

        super(props);

        // 创建一个ref

        this.myRef = React.createRef();

      }

      componentDidMount() {

        // 在组件挂载后,通过ref获取DOM节点并操作它

        this.myRef.current.focus(); // 例如,聚焦输入框

      }

      render() {

        return ;

      }

    }

    使用回调函数(React 16.3版本之前的方式,不推荐但仍然有效):

    import React, { Component } from 'react';

    class MyComponent extends Component {

      constructor(props) {

        super(props);

        // 初始化一个ref为null

        this.myRef = null;

      }

      componentDidMount() {

        // 在组件挂载后,通过ref获取DOM节点并操作它

        if (this.myRef) {

          this.myRef.focus(); // 例如,聚焦输入框

        }

      }

      render() {

        return (this.myRef = ref)} />;

      }

    }

    无论选择哪种方式,都可以使用ref来获取DOM节点并执行需要的操作。值得注意的是,使用React.createRef()是React官方推荐的方式,因为它在性能和可读性方面更好。

  • 相关阅读:
    axios
    一些常见的字符串匹配算法
    【阅读笔记】多任务学习之PLE(含代码实现)
    玩转AIGC:打造令人印象深刻的AI对话Prompt
    BUUCTF Reverse/crackMe
    计算几何基础知识
    uniapp前端对数据的处理
    UI插画设计如何提升用户体验优漫动游
    Matlab:确定数值类
    【API文档说明】获取商品详情和销量
  • 原文地址:https://blog.csdn.net/sun13047140038/article/details/133362678