傳球的JavaScript塊通過模板轉義

我想在我的內容是這樣Reactjs代碼：傳球的JavaScript塊通過模板轉義

<script type="text/babel"> 

    ReactDOM.render(
    <div> 
     <h1>Hello, world!</h1> 
     <a href="http://www.example.com">this is a link...</a> 
    </div>, 
    document.getElementById('root') 
); 

</script>

我想這個代碼實際運行，不只是爲了顯示。但是，當它通過Hugo模板時，它會顯示爲：

<p><script type="text/babel"></p> 

<pre><code> ReactDOM.render(
    &lt;div&gt; 
     &lt;h1&gt;Hello, world!&lt;/h1&gt; 
     &lt;a href=&quot;http://www.example.com&quot;&gt;this is a link...&lt;/a&gt; 
    &lt;/div&gt;, 
    document.getElementById('root') 
); 

&lt;/script&gt; 
</code></pre>

這意味着它不會運行。

基本上，我希望內容編輯器能夠放入React組件代碼並讓它在頁面上運行。謝謝。

編輯：這就是我想成爲雨果模板的最終輸出：

<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Hello World</title> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script src="https://unpkg.com/[email protected]/babel.min.js"> 
</script> 
    </head> 
<body> 

    <div id="root"></div> 

    <script type="text/babel"> 

    ReactDOM.render(
     <div> 
     <h1>Hello!!</h1> 
     <a href="http://www.example.com">this is a link...</a> 
     </div>, 
     document.getElementById('root') 
    ); 

    </script> 


</body> 
</html>

，但我想在被輸入到降價網頁腳本標記之間的位，因爲它會被其他文字包圍，並且不應該成爲模板的一部分

來源

2017-06-22 Zuriar

難道你不是在想這個嗎？反應組件本身就是一個模板...如果您希望用戶能夠決定顯示哪個模板，那麼該選擇應該是模板的一部分。 – Kokodoko

所以，我希望編輯能夠將組件代碼添加到頁面中，而不是模板 – Zuriar

好吧，所以我解決了這個問題。

爲了得到這個工作，你需要確保開放

<script>

標籤沒有空格左邊。它必須開始行。否則，我想模板引擎會繼續前進並逃脫它。

來源

2017-06-22 13:42:08 Zuriar

傳球的JavaScript塊通過模板轉義

回答

相關問題