Bootstrap 4- react -多行代码块

Question

使用react 16 - with create- react -app和bootstrap 4，我不能让一个pre/code块在一个react应用中是多行的。

除了react部分，这是根据Bootstrap文档编写的：https://getbootstrap.com/docs/4.0/content/code/#code-blocks

我已经验证了这在一个普通的HTML应用程序中是正确的(是多行的)，所以在我的创建-反应-应用程序环境中(webpack，巴别塔？)，它不能工作。

import React, { Component } from "react";
import "./App.css";
class App extends Component {
  render() {
    return (
      <div>
        {/* prettier-ignore */}
        <pre>
          <code>
&lt;p&gt;&lt;a href="#" class="text-primary"&gt;Primary link&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="#" class="text-secondary"&gt;Secondary link&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="#" class="text-success"&gt;Success link&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="#" class="text-danger"&gt;Danger link&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="#" class="text-warning"&gt;Warning link&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="#" class="text-info"&gt;Info link&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="#" class="text-light bg-dark"&gt;Light link&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="#" class="text-dark"&gt;Dark link&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="#" class="text-muted"&gt;Muted link&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="#" class="text-white bg-dark"&gt;White link&lt;/a&gt;&lt;/p&gt;
          </code>
        </pre>
      </div>
    );
  }
}

export default App;

运行此命令会产生以下结果：

​

​

在chrome inspector中，它看起来像这样：

​

​

如何让pre/code块渲染多行？

Answer 1

在需要新行时添加<br />元素。如下所示：

&lt;p&gt;&lt;a href="#" class="text-primary"&gt;Primary link&lt;/a&gt;&lt;/p&gt;<br />
&lt;p&gt;&lt;a href="#" class="text-secondary"&gt;Secondary link&lt;/a&gt;&lt;/p&gt;<br />