Estoy tratando de pasar una referencia a la función exportComponentAsPNG .
return ( <div id="grid"> <div id="pixels" ref={this.gridRef}>{rows}</div> {(() => { if (shouldExport) { exportComponentAsPNG(this.gridRef); } else { console.log("shouldn't export"); } })()} <button onClick={() => exportComponentAsPNG(this.gridRef)} className="mocha-button">Export</button> </div> ) this.gridRef se define en el constructor como:
constructor(props) { super(props); this.gridRef = React.createRef(); } El exportComponentAsPNG(this.gridRef) funciona con el componente de button . Sin embargo, cuando trato de llamarlo en el bloque if, me da el siguiente error:
Uncaught Error: 'node' must be a RefObject at d (index.js:171:1) at p (index.js:171:1) at Grid.js:38:1 at Grid.render (Grid.js:42:1) at finishClassComponent (react-dom.development.js:20561:1) at updateClassComponent (react-dom.development.js:20507:1) at beginWork (react-dom.development.js:22440:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1) at invokeGuardedCallback (react-dom.development.js:4274:1)¿Podría explicar por qué la llamada desde el bloque if es diferente y cómo solucionarlo porque en mi caso no sería ideal usar la implementación del botón; Preferiría llamarlo desde el bloque if.
El girdRef.current es null en el primer render. Incluso si hace que funcione con comprobaciones nulas, no es una buena práctica usar una función como esa.
Debe usar componentDidMount o componentDidUpdate para escribir su acción según sus necesidades.
componentDidUpdate() { if (shouldExport) { exportComponentAsPNG(this.gridRef); } else { console.log("shouldn't export"); } }