使用JSX將WYSIWYG編輯器中的字串的一部分替換

Question

我有一個由WYSIWYG編輯器輸入提供的字串，例如：

const originalString = "<div>一些文字</div><strong>一些加粗文字{{response}}</strong> ";

我需要用一些JSX取代{{response}}，並將結果輸出為HTML。

我認為我不能使用dangerouslySetInnerHTML，因為它不處理JSX。相反，你會得到以下輸出：

<div>一些文字</div>
<strong>一些加粗文字 [object Object]</strong>

在這裡查看範例。

有沒有一種方法可以用JSX取代{{response}}，然後在渲染時將字串的其餘部分轉換為有效的HTML？

Answer 1

這是你想要的嗎？

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;