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

Question

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

问题是在文档中函数setOption() 是使用this.chart.setOption(option) 引用的。如果我尝试不使用this.，我会收到一条消息，其中chart 未定义，如果我只使用函数，我会收到一条消息说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() {
  const chart = React.useRef(null);
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
      },
    ],
  };

  return (
    <View style={styles.chartContainer}>
      <Button
        title="Update"
        onPress={() => {
          if (chart) {
            chart.current.setBackgroundColor('rgba(0,255,0,0.3)');
          }
        }}
      />
      <ECharts
        ref={chart}
        option={option}
        backgroundColor="rgba(93, 169, 81, 0.4)"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  chartContainer: {
    flex: 1,
  },
});