使用 ref 获取 DOM 元素

在 React 和 Vue 中，推荐使用 ref 来获取 DOM 元素，而不是直接使用 querySelector。

ref 是 React 和 Vue 提供的一种引用机制，可以用来获取组件或 DOM 元素的引用。通过 ref，可以在组件中访问和操作 DOM 元素。使用 ref 的好处是它与 React 和 Vue 的生命周期方法结合得很好，可以在组件挂载后、更新后或卸载前访问和操作 DOM 元素。

使用 ref 的步骤如下：

React 使用方法

创建一个 ref 对象：在组件的构造函数中，使用 React.createRef() 方法创建一个 ref 对象。例如：

import {createRef} from "react";

export default class IndexPage extends Page {
    constructor(props, context) {
        super(props, context);
        this.echartsDiv = createRef();
    }
}

将 ref 与 DOM 元素关联：在需要引用的 DOM 元素上，使用 ref 属性将 ref 与 DOM 元素关联起来。例如：

<div id="echartsDiv" ref="{$page.echartsDiv}" style="height:362px">
</div>

特别说明

• div 使用 html 标签，不使用系统组件 antdpro:Div
• ref 属性必须使用大括号

访问和操作 DOM 元素：通过 ref 对象的 current 属性，可以访问到关联的 DOM 元素。例如，可以使用 current 属性来获取 DOM 元素的属性或调用 DOM 元素的方法。例如：

    onPageReady = (event) => {
        if(this.echartsDiv.current){
            //初始化echarts
            let myChart = echarts.init(this.echartsDiv.current);
            //设置数据
            myChart.setOption(option);
        }
    }

vue 使用方法

声明一个 ref 对象：使用 ref() 方法声明一个 ref 对象。例如：

import { ref } from "vue";
let echartsDiv = ref();

将 ref 与 DOM 元素关联：在需要引用的 DOM 元素上，使用 ref 属性将 ref 与 DOM 元素关联起来。例如：

<div id="echartsDiv" ref="{echartsDiv}" style="height:361px">
</div>

特别说明

• div 使用 html 标签，不使用系统组件 antdv:Div
• ref 属性必须使用大括号

访问和操作 DOM 元素：通过 ref 对象的 value 属性，可以访问到关联的 DOM 元素。例如，可以使用 value 属性来获取 DOM 元素的属性或调用 DOM 元素的方法。例如：

let onPageReady = (event) => {
    if(echartsDiv.value){
        //初始化echarts
        let myChart = echarts.init(echartsDiv.value);
        //设置数据
        myChart.setOption(option);
    }
}

案例位置

桌面-页面-引入第三方组件-echarts.w