Tengo un gráfico con una calidad gráfica inferior que se muestra en un componente principal <HeatMap /> . HeatMap tiene un componente secundario, <MyButton {...data}> . MyButton es básicamente un botón, que descarga la imagen del gráfico. Mi requisito es: después de hacer clic en el botón, el padre (Mapa de HeatMap ) debe volver a renderizarse en una imagen svg de alta calidad. Y solo después de eso, la descarga debería ocurrir.

Lo que he podido lograr: al hacer clic en el botón por primera vez, la calidad de la imagen cambia a un svg, pero se descarga la imagen png . Creo que la descarga comienza antes de que el padre esté completamente renderizado.

Código:

 class HeatMap extends Component { constructor (props) { super(props); this.state = { getSVG: false, loadedData: [], } } render () { const { getSVG, loadedData } = this.state; return ( <Fragment> {getSVG ? <HeatmapSeries colorType="literal" data={loadedData} /> // svg graph : <HeatmapSeriesCanvas colorType="literal" data={loadedData} />} // png(low-qlty) <MyButton {...this.props} svgFunction={(required) => this.setState({ getSVG: true})} getSVG={getSVG} /> </Fragment> ) } }

 class MyButton extends Component { render() { return ( <Button size="small" icon="download" onClick={this._downloadSVG} >SVG</Button> ) } /** * Generate the image and the download action * @return {void} **/ async _downloadSVG() { const { svgFunction } = this.props; if (typeof svgFunction === 'function') { svgFunction(); // re-render the graph as a vector (try to re-render parent first) } methodToDownloadGraph({...this.props}); // graph svg is passed as argument } }

El problema es: methodToDownloadGraph se completa antes, se completa la nueva representación de los padres. Aquí hay una imagen de lo que quiero lograr: