如何替换“这个”。在功能性 React Native with Hooks 中？

Question

我正在尝试使用以下react-native-echarts-wrapper但在我的项目中，我的所有组件都是使用钩子制作的。所以，当我有一个状态变量改变它的状态时，我想执行setOption(option)选项包含状态值的函数。

问题是在文档中setOption()使用this.chart.setOption(option). 如果我尝试在没有的情况下放置，this.我会收到一条消息 where chartis undefined ，如果我只使用函数，我会收到一条消息说setOption is not a function.

那么有没有办法使用RN Hooks获取图表组件及其函数的引用呢？

这是我的代码：

const [radarChartData, setRadarChartData] = React.useState([])

const option = { 

title: {

    show:false,

    text: 'Gráfico Radar'

},

tooltip: {},

legend: {

orient: 'horizontal',

position:'bottom',

left: 0,

bottom:0,

type:'scroll',             

pageButtonPosition:'end', 

data: chartColumnNameArray,

},

radar: {

    radius:'70%',

    name: {

        textStyle: {

            color: '#fff',

            backgroundColor: '#999',

            borderRadius: 3,

            padding: [3, 5]

        }

    },

    indicator: chartValueArray.map((item, index)=>{

    return {name:chartColumnNameArray[index].toUpperCase().substring(0,5).concat('.'), max:maxValue}

    })

},

series: [{

    name: 'TEST',

    type: 'radar',          

    data: radarChartData <------------------- //when this state changes I would setOptions and reload chart

}]

};

<View style={{display:  visibleChart==="radarchart"?"flex":"none", width:'100%', height:'60%'}} >                     

         <ECharts option={option} additionalCode={React.useEffect(()=>{this.chart.setOption(option)},[radarChartData])}/>                                                              

</View>

Answer 1

您将不得不使用“useRef”挂钩来访问图表，即使在提供的示例中，它们也使用对图表的引用并对其进行更新。我已经做了一个更改背景颜色的基本示例，这将使您了解如何在图表中使用挂钩。只需设置 ref 并使用 chart.current 而不是 this.chart。import React, { Component } from 'react';import { StyleSheet, View, Button } from 'react-native';import { ECharts } from 'react-native-echarts-wrapper';export default function App() {&nbsp; const chart = React.useRef(null);&nbsp; const option = {&nbsp; &nbsp; xAxis: {&nbsp; &nbsp; &nbsp; type: 'category',&nbsp; &nbsp; &nbsp; data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],&nbsp; &nbsp; },&nbsp; &nbsp; yAxis: {&nbsp; &nbsp; &nbsp; type: 'value',&nbsp; &nbsp; },&nbsp; &nbsp; series: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; data: [820, 932, 901, 934, 1290, 1330, 1320],&nbsp; &nbsp; &nbsp; &nbsp; type: 'line',&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ],&nbsp; };&nbsp; return (&nbsp; &nbsp; <View style={styles.chartContainer}>&nbsp; &nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; &nbsp; title="Update"&nbsp; &nbsp; &nbsp; &nbsp; onPress={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (chart) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chart.current.setBackgroundColor('rgba(0,255,0,0.3)');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; <ECharts&nbsp; &nbsp; &nbsp; &nbsp; ref={chart}&nbsp; &nbsp; &nbsp; &nbsp; option={option}&nbsp; &nbsp; &nbsp; &nbsp; backgroundColor="rgba(93, 169, 81, 0.4)"&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </View>&nbsp; );}const styles = StyleSheet.create({&nbsp; chartContainer: {&nbsp; &nbsp; flex: 1,&nbsp; },});