Html-react-parser: スタイル属性で!importantを処理する方法は?

作成日 2021年02月18日  ·  8コメント  ·  ソース: remarkablemark/html-react-parser

残念ながら、cmsからhtmlタグを取得することがあります。これには、!importantを含むインラインスタイルが含まれています。 それらを解析してReactアプリでレンダリングする必要があります。

それについて私ができることは何もありません。!importantが付加されたすべてのスタイルは、Reactによって削除されます。
html-react-parserを使用してこれらのスタイルを保持し、本体に残るようにする方法はありますか?
申し訳ありませんが、これについて質問するのに適切な場所ではない場合は、この問題を解決してください。

ありがとう!

question

全てのコメント8件

@linkurzweg html-react-parserは必要ないかもしれません。 フィドルを参照してください。 危険なSetInnerHTMLを使用する場合は、XSSの脆弱性に注意してください。

@remarkablemarkああ、私は
私の場合、XSSの実際のリスクはないので、問題ないはずです。

問題は、本体にReactコンポーネントで置き換える必要のある要素が含まれている可能性があるため、すべてをhtml-react-parserで実行する必要があることです。 要素にスタイル属性がある場合にのみ、そのままレンダリングできます。
解析時にdomNodeを文字列に戻す方法はありますか?

どうもありがとうございます!

@linkurzweg domNodeをdomToReact()渡すと、React要素としてレンダリングされます。 置換の例を参照してください。

@remarkablemarkありがとうございました! 私はそれを知っていますが、それが私の場合にどのように役立つかわかりませんか?
それでも、domNodeをdangerlySetInnerHTMLで使用できる文字列に戻す必要がありますか、それとも何かが得られませんか?

@linkurzweg私はあなたのユースケースに従いません。 CodeSandboxJSFiddle 、またはRepl.itを使用した例を提供できますか?

@remarkablemarkここでフィドルを参照してください: https//jsfiddle.net/9bezs1rt/
つまり、次のようになります。すべてのhtmlを含む1つの巨大な文字列を取得します。これは、何らかの方法で解析する必要があります(スクリプトタグ、iframe、ソーシャルメディアの埋め込みなどを含めることができます)。 すべてのDOMノードを反復処理し、さまざまなケースを処理する必要があります。

domノードにいくつかのインラインスタイルがアタッチされている場合、それをReactコンポーネントに置き換える必要はなく、!importantを持つスタイルを含めてパススルーしたいだけだと思います。 そして残念ながら、それらは失われます。

@linkurzwegフィドルを作成していただきありがとうございます。 したがって、スタイルが正しくレンダリングされない理由は、インラインスタイルが!important必要としないためです。

!important削除した後、赤い境界線を表示しました。 更新されたフィドルを参照してください。

@remarkablemarkもちろん、ばかげた私! インラインスタイルと衝突する可能性のある、html文字列内に!importantが付いた他のスタイルタグ(すべて非常に厄介です)が存在する可能性があります。 ただし、!importantも削除できるので、問題ないはずです。 :Dこれとあなたの助けを見てくれてありがとう!

このページは役に立ちましたか?
0 / 5 - 0 評価