React 中的 Prism.js html 示例

Question

因此，我正在将我们正在处理的网站的内部样式指南从常规 html 切换为使用 reactjs。我有示例代码，并且我正在使用 Prism.js 突出显示。突出显示似乎工作正常，但换行符不行。即使在每一行后放入 br 标签也没有效果。有没有人对此有任何想法？只是一些示例代码：

var Example = React.createClass({
    render: function() {
        return (
          <div class="highlight">
              <pre>
                 <code class="language-markup">
                     &lt;label class=&quot;select&quot;&gt;
                     &lt;select class=&quot;selector&quot;&gt;
                            &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
                            &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
                            &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
                            &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
                            &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
                         &lt;/select&gt;
                     &lt;/label&gt;
                 </code>
             </pre>
         </div>
    );
  }      
});

React.render(<Example />, document.getElementById('example'));

当它呈现时，它看起来像这样。

<label class="select"><select class="selector"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></label>

但我希望它看起来像这样：

var Example = React.createClass({
    render: function() {
        return (
          <div class="highlight">
              <pre>
                 <code class="language-markup">
                     &lt;label class=&quot;select&quot;&gt;
                     &lt;select class=&quot;selector&quot;&gt;
                            &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
                            &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
                            &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
                            &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
                            &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
                         &lt;/select&gt;
                     &lt;/label&gt;
                 </code>
             </pre>
         </div>
    );
  }      
});

React.render(<Example />, document.getElementById('example'));

有人知道保留换行符的方法吗？

Answer 1

你可以像这样编码：

var Example = React.createClass({
    render: function() {
        return (
          <div class="highlight">
              <pre>
                 <code class="language-markup">
                 {`
                <label class="select">
                <select class="selector">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                 </select>
                </label>
                 `}
                 </code>
             </pre>
         </div>
    );
  }      
});

演示就在这里。

唯一的不足是缩进。