Estoy tratando de mejorar mi función. actualmente así es como accedo a mis childNodes
const handleClick = (data) => { console.log( "canvas before ", data.currentTarget.children[0].childNodes[0].childNodes[0].style.height ); console.log("wrapper ", data.currentTarget.style.height); // make my echart dimension same as my wrapper dimension data.currentTarget.children[0].childNodes[0].childNodes[0].style.height = data.currentTarget.style.height; data.currentTarget.children[0].childNodes[0].childNodes[0].style.width = data.currentTarget.style.width; };y aquí es donde llamo a mi handleClick
return ( <ResponsiveGridLayout layouts={layout}> <div key="1" onClick={handleClick}> <NewvsReturnVisitors /> <span className="remove" style={removeStyle}> x </span> </div> </ResponsiveGridLayout> );Siento que la función handleClick se puede mejorar aún más, apreciaré si alguien puede darme consejos sobre cómo mejorar mi función handleClick, haciéndola más legible y más optimizada si es posible.
Haga clic en este enlace para mis códigos y caja
Así que fui y descarté la función que manipula el DOM y usé más biblioteca directamente dentro de mi objeto gráfico.
nuevovsreturnvistors.js
import * as echarts from "echarts"; import React, { useEffect, useRef } from "react"; import useComponentSize from "@rehooks/component-size"; const Newvsresturnvisitors = () => { ... const chart = useRef(null); let chartInstance = null; const size = useComponentSize(chart); function renderChart() { const renderInstance = echarts.getInstanceByDom(chart.current); if (renderInstance) { chartInstance = renderInstance; } else { chartInstance = echarts.init(chart.current); } chartInstance.setOption(option); } useEffect(() => { renderChart(); if (chartInstance != null) { chartInstance.resize({ height: size.height }); } }, [size]); return ( <div ref={chart} style={{ width: "100%", height: "100%", background: "white" }} /> ); };Importo el tamaño del componente para leer la dimensión del gráfico actual. Luego, en mi useEffect, verifico los cambios de tamaño y llamo a la función de cambio de tamaño para ajustar el tamaño de mi gráfico en consecuencia.
enlace de trabajo es el mismo en mi pregunta. Si hay una manera aún mejor de hacer esto, no dude en comentar, yo también quiero mejorar.