使用JSX将WYSIWYG编辑器中的字符串的一部分替换
P粉060112396
2023-08-17 10:28:01
<p>我有一个由WYSIWYG编辑器输入提供的字符串，例如：</p>
<pre class="brush:js;toolbar:false;">const originalString = "<div>一些文本</div><strong>一些加粗文本 {{response}}</strong>";
</pre>
<p>我需要用一些JSX替换<code>{{response}}</code>，并将结果输出为HTML。</p>
<p>我认为我不能使用<code>dangerouslySetInnerHTML</code>，因为它不处理JSX。相反，你会得到以下输出：</p>
<pre class="brush:html;toolbar:false;"><div>一些文本</div>
<strong>一些加粗文本 [object Object]</strong>
</pre>
<p>在这里查看示例。</p>
<p>有没有一种方法可以用JSX替换<code>{{response}}</code>，然后在渲染时将字符串的其余部分转换为有效的HTML？</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;