React.renderToStaticMarkup 输出十六进制代码

Question

我正在使用 ReactDOMServer.renderToStaticMarkup 以代码块格式将一些 html 代码呈现到静态网页上。

下面是我的代码的近似值：

import { html_beautify } from 'js-beautify';
import { renderToStaticMarkup } from 'react-dom/server';

...

render() {
    const snippet = html_beautify(renderToStaticMarkup(
        <div>
            <script>
                generateWidget(&#123;
                    buttonSize: 'BUTTON_SIZE',
                    elementID: 'ELEMENT_TO_INJECT_THE_WIDGET_INTO',
                    userID: 'ID_OF_USER'
                &#125;);
            </script>
        </div>
    ));
    return (
        <pre>
            <code>
                {snippet}
            </code>
        </pre>
    );
}

在我使用 { 和 } 的转义码之前，我从 JSX 解析器中得到解析错误，所以这就是 render 函数中出现这些错误的原因。

我的问题是 renderToStaticMarkup 将代码片段中的单引号替换为相应的十六进制代码。输出如下所示：

...
<script>
    karma.generateWidget({
        buttonSize: & #x27;BUTTON_SIZE & #x27;,
        elementID: & #x27;ELEMENT_TO_INJECT_THE_WIDGET_INTO & #x27;,
        userKarmaID: & #x27;KARMA_ID_OF_USER & #x27;
    });
</script>

有什么方法可以摆脱 renderToStaticMarkup 呈现的 & #x27; 十六进制代码并让它呈现单引号吗？

请注意，如果我用双引号替换单引号，& #x27 将替换为 & quot;。

Answer 1

React 默认清理 HTML。

您将需要使用 dangerouslySetInnerHTML。

React.renderToStaticMarkup 输出十六进制代码

React.renderToStaticMarkup outputs hexadecimal code

html

reactjs

react-jsx