Question

我想在我的内容中包含Reactjs代码，如下所示：

<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组件代码并让它在页面上运行。感谢。

编辑：这就是我想成为hugo模板的最终输出：

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/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>

但我希望将脚本标记之间的位输入到降价页面，因为它将被其他文本包围，并且不应构成模板的一部分

Answer 1

好的，所以我解决了这个问题。

为了让这个工作，您需要确保打开

<script>

标签左侧没有空格。它必须开始这条线。否则，我想模板引擎会继续前进并逃脱它。

通过未转义的

1 个答案: