5

因此，我正在将我们正在开发的网站的内部样式指南从常规 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>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" rel="stylesheet"/>
<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>

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

4

3 回答 3

4

您可以像这样编写代码：

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>
    );
  }      
});

演示在这里。

唯一不足的是缩进。

于 2016-03-31T09:20:35.740 回答
3

第一：用于 ReactDOMServer.renderToStaticMarkup将组件渲染为字符串

var inner = ReactDOMServer.renderToStaticMarkup(
    <label className="select">
        ...
    </label>
);

在使用JS Beautifier美化你的字符串之后

inner = html_beautify(inner);

Finnaly将其作为字符串插入到您的代码中

<code className="language-markup">
   {inner}
</code>

网址：http: //jsfiddle.net/ohwz5ry2/2/

于 2015-04-18T06:25:20.907 回答
2

只要给这样的孩子，它就会像魅力一样发挥作用。

<pre>
    <code class="language-markup">
        {`
         .ui-datatable table {
             border-collapse:collapse;
             width: 100%;
             table-layout: fixed;
         }

       `}
    </code>
</pre>
于 2017-01-04T12:12:56.017 回答