功能介绍
实现类似vue的ref，使用ref拿到dom，然后做一些事情。react的ref和vue3.x的ref使用方式十分相似，准确的说是vue3.x像react。。ref等号后面命名需要和const 定义的变量名一致。文章来源：https://www.toymoban.com/news/detail-507921.html
代码实现
比如我有一个图表组件，想要通过一个按钮去重置他重置文章来源地址https://www.toymoban.com/news/detail-507921.html
// 封装图表bar组件
import * as echarts from 'echarts'
import { Button } from 'antd';
import { useEffect, useRef } from 'react'
function Bar ({ title, xData, yData, style }) {
const domRef = useRef() //重点是这里
var myChart = {}
const chartInit = () => {
// 基于准备好的dom，初始化echarts实例
myChart = echarts.init(domRef.current) //赋值
// 绘制图表
myChart.setOption({
title: {
text: title
},
tooltip: {},
xAxis: {
data: xData
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: yData
}
]
})
}
useEffect(()=>{
chartInit()
})
const resetChart = (bool)=>{
console.log('发生的纠纷和觉得',bool)
myChart.dispose() //销毁
setTimeout(()=>{
chartInit()
})
}
return (
<div>
{/* 准备一个挂载节点 */}
<div ref={domRef} style={style}></div>
<Button onClick={()=>resetChart(true)}>重置</Button>
</div>
)
}
export default Bar
到了这里，关于React V6的ref操作的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
