Html-react-parser: Error: img es una etiqueta de elemento vacío y no debe tener `niños` ni usar` dangerouslySetInnerHTML`

Creado en 26 ago. 2016 · 14Comentarios · Fuente: remarkablemark/html-react-parser

¡Hola!

Gran complemento, realmente creo que esto será útil para lo que estoy trabajando.

Me di cuenta de que analizar cualquier elemento img provoca el error anterior. Esto también puede aplicarse a cualquier elemento que nunca debería tener elementos secundarios.

Una solución temporal es usar algo como esto:

const parserConfig = {
    replace: domNode => {
        if(domNode.type === DOM_TYPE_TAG && domNode.name === 'img') {
            return <img src={domNode.attribs.src} alt={domNode.attribs.alt} className={domNode.attribs.class} />;
        }
    }
};

bug

Fuente

poacher2k

Comentario más útil

Me estaba encontrando con este problema porque estaba tratando de agregar niños a una etiqueta img ...

Sshetty2 en 28 may. 2019

👍2 😕1

Todos 14 comentarios

Gracias por hacérmelo saber. ¿Tiene un ejemplo para que pueda reproducir este error?

remarkablemark en 26 ago. 2016

¡Hola!
Puede reproducir esto con lo siguiente:
ReactDOM.render(Parser('<div><img src="" alt=""/></div>'), document.getElementById('root'));

poacher2k en 29 ago. 2016

¡Increíble gracias!

poacher2k en 29 ago. 2016

@ poacher2k Gracias por el ejemplo. Investigué el error y lo solucioné en el n. ° 16.

Pruebe npm update html-react-parser o npm install [email protected] y avíseme si esto elimina el error.

remarkablemark en 29 ago. 2016

😄1 👍1

Eso lo solucionó, ¡gracias de nuevo! ¡Me alegra ver que también agregaste comprobaciones para otros elementos nulos!

poacher2k en 29 ago. 2016

¡Es genial escucharlo y de nada! 👍

remarkablemark en 29 ago. 2016

@remarkablemark Todavía estoy enfrentando el problema y el código npm install [email protected] no está actualizado en esta versión.

vidit1 en 5 ene. 2018

@ vidit1 ¿Puede confirmar que instaló la versión latest ?

npm i html-react-parser<strong i="8">@latest</strong>

# or
npm i [email protected]

Luego verifique haciendo:

npm ls html-react-parser

remarkablemark en 5 ene. 2018

@remarkablemark Actualicé la última versión html-react-parser y todavía tengo este problema. Mi El elemento está dentro de un componente material-ui.
<Drawer> <div className="alert" role="alert"> <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" className="d-inline-block align-top" alt=""> Bootstrap </img> </div> </Drawer>