Html-react-parser: Erro: img é uma tag de elemento void e não deve ter `children` nem usar` dangerouslySetInnerHTML`
Oi!
Ótimo plugin, realmente acho que vai ser útil para o que estou trabalhando.
Percebi que a análise de qualquer img -elemento causa o erro acima. Isso também pode se aplicar a qualquer elemento que nunca deveria ter elementos filho.
Uma solução temporária é usar algo assim:
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} />;
}
}
};
poacher2k
Todos 14 comentários
Obrigado por me avisar. Você tem um exemplo para que eu possa reproduzir este erro?
remarkablemark
em 26 ago. 2016
Oi!
Você pode reproduzir isso com o seguinte:
ReactDOM.render(Parser('<div><img src="" alt=""/></div>'), document.getElementById('root'));
poacher2k
em 29 ago. 2016
Perfeito, obrigado!
poacher2k
em 29 ago. 2016
@ poacher2k Obrigado pelo exemplo. Eu verifiquei o bug e fiz uma correção no # 16.
Experimente npm update html-react-parser ou npm install [email protected] e me informe se isso remove o erro para você.
remarkablemark
em 29 ago. 2016
Isso resolveu, obrigado novamente! Fico feliz em ver que você também adicionou verificações para outros elementos nulos!
poacher2k
em 29 ago. 2016
Bom ouvir e você é muito bem-vindo! 👍
remarkablemark
em 29 ago. 2016
@remarkablemark Ainda estou enfrentando o problema e o código npm install
vidit1
em 5 jan. 2018
@ vidit1 Você pode confirmar se instalou a versão latest ?
npm i html-react-parser<strong i="8">@latest</strong>
# or
npm i [email protected]
Em seguida, verifique fazendo:
npm ls html-react-parser
@remarkablemark Atualizei a versão mais recente html- elemento está dentro de um 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>
blueskysmart
em 12 jan. 2018
@blueskysmart : Você tem o texto "Bootstrap" dentro de sua img -tag. Como diz o erro, img é um elemento vazio e não pode ter filhos.
Veja o comentário de @remarkablemark abaixo para obter orientação sobre como corrigi-lo.
poacher2k
em 12 jan. 2018
@blueskysmart O comentário feito por @ poacher2k está correto. Você pode ver a reprodução desse erro neste violino .
remarkablemark
em 12 jan. 2018
Okie, entendo. Obrigada.
blueskysmart
em 22 jan. 2018
Este erro também aparece se você apenas tentar analisar isto:
<img src="img.jpg".>
Para fazer funcionar, envolva-o em um div:
<div>
<img src="img.jpg".>
</div>
cipiripper
em 31 out. 2018
Eu estava tendo esse problema porque estava tentando adicionar filhos a uma tag img ...
Sshetty2
em 28 mai. 2019
Questões relacionadas
purp1eeeee
·
15Comentários
on2air
·
3Comentários
jerome-diver
·
9Comentários
kartikag01
·
5Comentários
ollie-o
·
3Comentários
Comentários muito úteis
Eu estava tendo esse problema porque estava tentando adicionar filhos a uma tag img ...