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>

有没有办法摆脱& #x27;呈现的renderToStaticMarkup十六进制代码并让它呈现单引号？

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

Answer 1

默认情况下，React会清理HTML。

您需要使用dangerouslySetInnerHTML。

React.renderToStaticMarkup输出十六进制代码

1 个答案: