美文网首页
引用获取实例

引用获取实例

作者: 曼木子 | 来源:发表于2021-07-22 13:51 被阅读0次

子组件

import * as echarts from 'echarts';
import React,{forwardRef} from "react";
import ReactECharts from 'echarts-for-react';
// var chartDom = document.getElementById('main');
// var myChart = echarts.init(chartDom);
// var option;

const Line = (props,ref) => {
    const {data} = props
    const getOption = () => {
        let option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            tooltip: {
                trigger: 'axis'
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'line'
            }]
        };
        return option
    }

    return (
        <>
            <ReactECharts option={getOption()}  ref={ref}/>
        </>
    )

}

export default  forwardRef(Line);

父组件

  const ref = createRef();
  useEffect(() => {
    var echarts = require('echarts')
    const { current } = ref;
    const echartsInstanceone = current.getEchartsInstance();
    echartsInstanceone.group = 'group1';
    console.log(echartsInstanceone)
    echarts.connect('group1')
  }, [])

render中
Line data={item} ref={ref} ></Line></>

相关文章

  • 引用获取实例

    子组件 父组件

  • React Refs

    终于看到最后一章了。你可以通过使用 this 来获取当前 React 组件,或使用 ref 来获取组件的引用,实例...

  • 单例模式的几种写法

    单例模式要点 私有的构造方法 指向实例的私有静态引用 获取实例对象的公有静态方法 饿汉模式(非线程安全) 懒汉模式...

  • ref无法获取到组件实例引用

    最近在使用react-intl国际化中,发现使用injectIntl,ref无法获取到组件实例了,最后搜索了以下,...

  • Vue的ref的使用

    一.什么是ref ? ref用来辅助我们获取DOM元素或组件的引用实例对象,每个vue的组件实例上,都包含一个re...

  • 单例模式

    三个要素 1、私有的构造方法 2、指向自身的静态实例引用 3、公有的静态的获取自身实例方法 饿汉式 懒汉式 但是以...

  • 枚举单例原理

    单例实现思路 1、构造方法私有化;2、实例化的变量引用私有化;3、获取实例的方法共有。 优点:避免反射、序列化问题

  • Swift 中的强引用循环

    强引用循环 两个引用类型实例之间相互引用。 解决方式 实例之间的: Weak 引用。适用于一方的引用可为 nil ...

  • swift防止循环引用简单整理

    weak 弱引用不会对其引用的实例保持强引用,因而不会阻止 ARC 销毁被引用的实例。这个特性阻止了引用变为循环强...

  • 双冒号方法引用

    类别使用形式静态方法引用类名 :: 静态方法名实例方法引用对象名(引用名) :: 实例方法名类方法引用类名 :: ...

网友评论

      本文标题:引用获取实例

      本文链接:https://www.haomeiwen.com/subject/ljosmltx.html