Estoy tratando de configurar un ícono para un botón en reaccionar, pero me está dando este error. El setIcon de la funcionalidad Button y el botón es así desde el código fuente:
class Button { node: HTMLButtonElement icon: SVGElement constructor() { this.node = document.createElement('button'); this.node.type = 'button'; this.icon = null; } setIcon(icon: SVGElement) { this.icon = icon; this.node.appendChild(icon); }
El botón es de una biblioteca escrita en TypeScript como botón de control de mapbox.
El icono que estoy usando es de MUI,
import AdjustIcon from '@mui/icons-material/Adjust'
Lo que hice fue this.back.setIcon(AdjustIcon);
Y this.back.setIcon(<AdjustIcon/>);
Ambos no funcionan y dan el mismo mensaje de error:
TypeError no detectado: no se pudo ejecutar 'appendChild' en 'Node': el parámetro 1 no es del tipo 'Node'.
El problema se solucionó, <AdjustIcon/>
es un elemento de reacción pero no un nodo DOM.
Sin embargo .appendchild()
espera un nodo DOM como parámetro, y eso causó el error.
La solución a esto es convertir <AdjustIcon/>
en un nodo DOM, y estaba usando ReactDOM.render()
para hacerlo.
const container = document.createElement('icon'); ReactDOM.render(<AdjustIcon />, container); this.back.setIcon(container);
Usa document.createElement()
para crear un contenedor y llama a ReactDOM.render()
para representar el icono en ese contenedor. Luego, simplemente use ese contenedor como el nodo del icono.