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。