默认情况下,React会对HTML进行清理。
我使用ReactDOMServer.renderToStaticMarkup
将一些html代码以代码块格式呈现到静态网页上。
下面是我的代码的近似值:
import { html_beautify } from 'js-beautify';
import { renderToStaticMarkup } from 'react-dom/server';
...
render() {
const snippet = html_beautify(renderToStaticMarkup(
<div>
<script>
generateWidget({
buttonSize: 'BUTTON_SIZE',
elementID: 'ELEMENT_TO_INJECT_THE_WIDGET_INTO',
userID: 'ID_OF_USER'
});
</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;
的。
您需要使用dangerouslySetInnerHTML。