javascript - contenteditable または innerhtml への反応コンポーネントの追加

Question

contentEditable を使用しているが React には含まれていないコンテンツ エディター (具体的にはミディアム エディター) を使用しています。誰かが画像をドラッグ アンド ドロップしたり、画像を挿入したりできるユース ケースがあります。私の質問は、エディターの html に以下を追加する代わりに:

editorHtml += '<img src ="something />'

理想的には React コンポーネントを追加したいと思います。

editorHtml += '<CoverImage src="something" />'

つまり、React コンポーネント外の html 要素の contentEditable や innerHtml に React コンポーネントを追加することはできますか?

Answer 1

React コンポーネントを文字列にレンダリングする必要があります。

これを実現するには、 を使用しますReactDOMServer。正確には、renderToStringメソッドを使用します。これは、React が必要とするすべての派手な要素属性 (例: data-react-id) を含む文字列を出力します。よりクリーンな出力が必要な場合は、代わりにrenderToStaticMarkupを使用してください。