Remplacer une partie de la chaîne dans l'éditeur WYSIWYG à l'aide de JSX

Question

J'ai une chaîne fournie par l'entrée de l'éditeur WYSIWYG, par exemple :

const originalString = "
Du texte
 Du texte en gras{{response}} ";
≪/pré>
Je dois remplacer {{response}} par du JSX et afficher le résultat au format HTML. 
Je ne pense pas pouvoir utiliser dangerouslySetInnerHTML car il ne gère pas JSX. Au lieu de cela, vous obtenez le résultat suivant : 
Du texte
Du texte en gras [objet Objet]
≪/pré>
Voir des exemples ici. 
Existe-t-il un moyen de remplacer {{response}} par JSX, puis de convertir le reste de la chaîne en HTML valide lors du rendu ? 
            

Answer 1

Est-ce ce que tu veux ?

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;