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.