使用JSX将WYSIWYG编辑器中的字符串的一部分替换
P粉060112396
P粉060112396 2023-08-17 10:28:01
0
1
520
<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>
P粉060112396
P粉060112396

全部回复(1)
P粉486138196

这是你想要的吗?

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;
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板