React里用echarts时候，init对象如何选取？refs获取值undefined

Question

总共两个问题：
1.有React比较简单好用的Echarts推荐吗？主要运用就是二维折线。
2.现在导入的是"echarts": "^3.6.1".
考虑到会异步取数据，所以讲init方法写在了didMount后，然后想把init后的对象放到state中，方便以后再获取新数据，didUpdate时候setOption。

    componentDidMount() {
        let myChart = echarts.init(this.refs.alertRuleChart); //初始化echarts
        console.log(myChart);
        this.setState({
            charts:myChart
        })

    }
    componentDidUpdate(){
        console.log(this.state.charts); //undefined
        console.log(this.refs.xxxx); //undefined
        const  data  = chartOption; //外部传入的data数据
        let myChart = this.state.charts;
        myChart.setOption(data);
    }

通过refs来获得init对象，但是在console中打印this.refs.xxxx是undefined的，也考虑用id的方式，不过感觉不太好。
render中

<div ref="xxxx" style....></div>

不知道哪里出的问题，希望大家帮助......

Answer 1

昨天研究了一下，发现是我项目的原因，推测是因为这个

<div ref="xxxx" style....></div>

是写在一个modal中的，默认是不显示的状态，也就是说这个div是undefined的。
所以写的方式是要通过componentDidUpdate下，显示看modal的visible为true的情况下，再获取div，这样就可以直接获取了。
因为这个modal是复用形式的，所以如果每次打开这个modal，你都init一次的话，虽说没有error，但是还是会报warning，提示这个dom已经有一个charts了，所以在componentDidUpdate时候，直接把init后的对象存到state中，这样每次都是操作这个charts，然后setOption就好了。

希望会对大家有帮助。