Html-react-parser: Fehler: img ist ein void-Element-Tag und darf weder `Kinder` haben noch `dangerouslySetInnerHTML` verwenden
Hi!
Tolles Plugin, denke wirklich, dass dies für das, woran ich arbeite, hilfreich sein wird.
Mir ist aufgefallen, dass das Parsen eines beliebigen img -Elements den obigen Fehler verursacht. Dies kann auch für jedes Element gelten, das niemals untergeordnete Elemente haben sollte.
Eine vorübergehende Problemumgehung besteht darin, etwas wie folgt zu verwenden:
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
Alle 14 Kommentare
Danke für die Information. Hast du ein Beispiel, damit ich diesen Fehler reproduzieren kann?
remarkablemark
am 26. Aug. 2016
Hi!
Sie können dies mit folgendem reproduzieren:
ReactDOM.render(Parser('<div><img src="" alt=""/></div>'), document.getElementById('root'));
poacher2k
am 29. Aug. 2016
Großartig, danke!
poacher2k
am 29. Aug. 2016
@poacher2k Danke für das Beispiel. Ich habe den Fehler untersucht und in #16 behoben.
Versuchen Sie es mit npm update html-react-parser oder npm install [email protected] und lassen Sie mich wissen, ob der Fehler dadurch für Sie behoben wird.
remarkablemark
am 29. Aug. 2016
Das hat es behoben, danke nochmal! Schön zu sehen, dass Sie auch Prüfungen für andere void-Elemente hinzugefügt haben!
poacher2k
am 29. Aug. 2016
Schön zu hören und herzlich willkommen! 👍
remarkablemark
am 29. Aug. 2016
@remarkablemark Ich stehe immer noch vor dem Problem und der npm install [email protected] wird in dieser Version nicht aktualisiert.
vidit1
am 5. Jan. 2018
@vidit1 Können Sie bestätigen, dass Sie die Version latest installiert haben?
npm i html-react-parser<strong i="8">@latest</strong>
# or
npm i [email protected]
Dann überprüfen Sie, indem Sie Folgendes tun:
npm ls html-react-parser
@remarkablemark Ich habe die neueste Version von html-react- stehe immer noch vor diesem Problem. Mein -Element befindet sich in einer material-ui-Komponente.
<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
am 12. Jan. 2018
@blueskysmart : Du hast den Text "Bootstrap" in deinem img -Tag. Wie der Fehler sagt, ist img ein void-Element und kann keine untergeordneten Elemente haben.
Sehen Sie sich den Kommentar von Problems zu erhalten.
poacher2k
am 12. Jan. 2018
@blueskysmart Der Kommentar von @poacher2k ist richtig. Sie können die Reproduktion dieses Fehlers in dieser Geige sehen .
remarkablemark
am 12. Jan. 2018
Okay, ich verstehe. Dankeschön.
blueskysmart
am 22. Jan. 2018
Dieser Fehler tritt auch auf, wenn Sie nur versuchen, dies zu analysieren:
<img src="img.jpg".>
Damit es funktioniert, wickeln Sie es in ein div ein:
<div>
<img src="img.jpg".>
</div>
cipiripper
am 31. Okt. 2018
Ich bin auf dieses Problem gestoßen, weil ich versucht habe, Kinder zu einem img-Tag hinzuzufügen ...
Sshetty2
am 28. Mai 2019
Verwandte Themen
lhtdesignde
·
9Kommentare
thany
·
7Kommentare
purp1eeeee
·
15Kommentare
shiglet
·
6Kommentare
mdeljavan
·
4Kommentare
Hilfreichster Kommentar
Ich bin auf dieses Problem gestoßen, weil ich versucht habe, Kinder zu einem img-Tag hinzuzufügen ...