Html-react-parser: エラー：imgはvoid要素タグであり、 `children`を含めることも` dangerouslySetInnerHTML`を使用することもできません

作成日 2016年08月26日 · 14コメント · ソース: remarkablemark/html-react-parser

やあ！

素晴らしいプラグインです。これは私が取り組んでいることに役立つと本当に思います。

img要素を解析すると、上記のエラーが発生することに気付きました。これは、子要素を持つべきではない要素にも当てはまります。

一時的な回避策は、次のようなものを使用することです。

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

ソース

poacher2k

最も参考になるコメント

imgタグに子を追加しようとしていたため、この問題が発生していました...

Sshetty2 2019年05月28日

👍2 😕1

全てのコメント14件

知らせてくれてありがとうございます。このエラーを再現できる例はありますか？

remarkablemark 2016年08月26日

やあ！
これは次の方法で再現できます。
ReactDOM.render(Parser('<div><img src="" alt=""/></div>'), document.getElementById('root'));

poacher2k 2016年08月29日

素晴らしいありがとう！

poacher2k 2016年08月29日

@ poacher2k例をありがとう。バグを調べて、＃16で修正しました。

npm update html-react-parserまたはnpm install [email protected]を試して、エラーが解消されるかどうかをお知らせください。

remarkablemark 2016年08月29日

😄1 👍1

それはそれを修正しました、もう一度ありがとう！他のvoid要素のチェックも追加されたことをうれしく思います！

poacher2k 2016年08月29日

聞いてうれしいです、そしてあなたは大歓迎です！ 👍

remarkablemark 2016年08月29日

@remarkablemark私はまだ問題に直面しており、npm [email protected]コードはこのバージョンでは更新されていません。

vidit1 2018年01月05日

@ vidit1 latestバージョンをインストールしたことを確認できますか？

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

# or
npm i [email protected]

次に、次のようにして確認します。

npm ls html-react-parser

remarkablemark 2018年01月05日

@remarkablemark最新バージョンのhtml-react-parserを更新しましたが、まだこの問題に直面しています。私の要素は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 2018年01月12日

@blueskysmart ： imgタグ内に「Bootstrap」というテキストがあります。エラーが示すように、 imgは無効な要素であり、子を持つことはできません。

修正方法のガイダンスについては、以下の@remarkablemarkのコメントを参照してください。

poacher2k 2018年01月12日

👍1

@blueskysmart @ poacher2kによるコメントは正しいです。このフィドルでこのエラーの再現を見ることができます。

remarkablemark 2018年01月12日

オーキー、なるほど。ありがとうございました。

blueskysmart 2018年01月22日

このエラーは、これを解析しようとした場合にも発生します。
<img src="img.jpg".>

それを機能させるには、divでラップします。

<div>
<img src="img.jpg".>
</div>

cipiripper 2018年10月31日

👍1

imgタグに子を追加しようとしていたため、この問題が発生していました...

Sshetty2 2019年05月28日

👍2 😕1

このページは役に立ちましたか？

0 / 5 - 0 評価

Html-react-parser: エラー：imgはvoid要素タグであり、 `children`を含めることも` dangerouslySetInnerHTML`を使用することもできません

最も参考になるコメント

全てのコメント14件

関連する問題