Gantikan sebahagian daripada rentetan dalam editor WYSIWYG menggunakan JSX

Question

Saya mempunyai rentetan yang disediakan oleh input editor WYSIWYG, sebagai contoh:

const originalString = "
Sesetengah teks
Sesetengah teks tebal{{response}} ";

Saya perlu menggantikan {{response}} dengan beberapa JSX dan mengeluarkan hasilnya sebagai HTML. 
Saya rasa saya tidak boleh menggunakan dangerouslySetInnerHTML Sebaliknya, anda mendapat output berikut: 
Sesetengah teks
Sesetengah teks tebal [objek Objek]

Lihat contoh di sini. 
Adakah terdapat cara untuk menggantikan {{response}} dengan JSX dan kemudian menukar rentetan selebihnya kepada HTML yang sah semasa membuat persembahan? 

Answer 1

Adakah ini yang anda mahukan?

import React, {renderToString} from "react";
import "./style.css";
import * as ReactDOMServer from 'react-dom/server';

export default function App() {
  return (
    <StringReplacement />
  );
}

class StringReplacement extends React.Component {
  render() {
    //这可以是从所见即所得编辑器中作为字符串的任何有效的HTML
    const originalString = "<div>some text</div><strong>some strong text {{response}}</strong>";

    // 用JSX内容替换'{{response}}'
    const jsxReplacement = <span onClick={ () => alert('')}>JSX content here</span>;
    const replacedString = originalString.replace('{{response}}', ReactDOMServer.renderToString(jsxReplacement));

    return (
      <div>
        <div dangerouslySetInnerHTML={{ __html: replacedString }} />
      </div>
    );
  }
}

export default StringReplacement;