React.renderToStaticMarkup输出十六进制代码



我使用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;的。

默认情况下,React会对HTML进行清理。

您需要使用dangerouslySetInnerHTML。

最新更新