1

Quill を動作させることができましたが、HTML マークアップなしでエディターからコンテンツを表示したいと考えました。react-render-html npm パッケージを使用してみました。以前は正常に動作していましたが、現在はメンテナンスされておらず、エラーが発生します

Could not find a declaration file for module 'react-render-html'. /path/to/module
implicitly has an 'any' type.
  Try `npm install @types/react-render-html` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-render-html';

また、htmlマークアップで表示されます。だから私はreact-html-parserhtmrhtml-to-react npm packages を使用してみましたが、単一の要素では完全に機能しますが、複数の要素では機能しません。それで、console.logを試して、バックエンドから受け取っているものを確認しました。これにより、これが得られました

<p>&lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt; &lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt; &lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt; &lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt; &lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt;

これを html マークアップなしでレンダリングしたかったので、console.log を実行して適切に変換されているかどうかを確認しました。

  //import renderHtml from 'htmr';
  //import renderHtml from 'html-to-react';

    import renderHtml from 'react-html-parser';
 
  console.log(renderHtml(${blog.excerpt}))

そして最終的にそれは私にこれを与えました

<h2>Hello</h2><p>how are you ? </p>
<h2>Hello</h2><p>how are you ? </p> 
<h2>Hello</h2><p>how are you ? </p> 
<h2>Hello</h2><p>how are you ? </p> 
<h2>Hello</h2><p>how are you ? </p>

私も試してみましdangerouslysetinnerhtml たが、再び機能しません

4

1 に答える 1