亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何替換“這個”。在功能性 React Native with Hooks 中?

如何替換“這個”。在功能性 React Native with Hooks 中?

慕雪6442864 2023-04-14 16:38:52
我正在嘗試使用以下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>
查看完整描述

1 回答

?
蕭十郎

TA貢獻1815條經驗 獲得超13個贊

您將不得不使用“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,

  },

});


查看完整回答
反對 回復 2023-04-14
  • 1 回答
  • 0 關注
  • 152 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號