<p>Ich habe eine Zeichenfolge, die von der WYSIWYG-Editor-Eingabe bereitgestellt wird, zum Beispiel: </p> <pre class="brush:js;toolbar:false;">const originalString = "<div>Einiger Text</div><strong>Einiger fetter Text{{response}}</strong> "; </pre> <p>Ich muss <code>{{response}}</code> durch etwas JSX ersetzen und das Ergebnis als HTML ausgeben. </p> <p>Ich glaube nicht, dass ich <code>dangerouslySetInnerHTML</code> verwenden kann, da es kein JSX unterstützt. Stattdessen erhalten Sie die folgende Ausgabe: </p> <pre class="brush:html;toolbar:false;"><div>Einige Texte</div> <strong>Einiger fetter Text [Objekt Objekt]</strong> </pre> <p>Beispiele hier ansehen. </p> <p>Gibt es eine Möglichkeit, <code>{{response}}</code> durch JSX zu ersetzen und dann beim Rendern den Rest der Zeichenfolge in gültiges HTML zu konvertieren? </p>

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;