Bootstrap 4 - 反应 - 多行代码块

Question

使用 react 16 - 使用 create-react-app 和 bootstrap 4，我无法让 pre/code 块与 react 应用程序多行。

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

我已经验证了它在一个直接的 HTML 应用程序中可以正常工作（是多行的），所以它在我的 create-react-app 环境（webpack，babel？）中无法正常工作。

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 检查器中它看起来像这样：

如何让 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 />