使用JSX将代码呈现到页面，同时保留换行符

Question

我正在尝试使用一个字段，它将包含包含换行符和制表符的大量代码。我希望它呈现和保留制表符和换行。

基本上，当我输出代码时，我希望它看起来像在堆栈溢出中格式化的代码。当我使用字符串文字时，它不会保留制表符和换行符。

下面是我的代码

import React, { useContext } from 'react'
import FunctionalContext from '../../context/functional/functionalContext';


const FunctionalComponent = () => {
  const functionalContext = useContext(FunctionalContext);

  return (
    <div>
      <h1>Classes</h1>
      <h2>Classes</h2>
      <code>{`
          import React from 'react'
        constructor() {
          super()
      `}
      </code>



    </div>
  )
}

export default FunctionalComponent

Answer 1

默认情况下，code元素不是预先格式化的。您可以向其应用white-space样式之一，也可以将其放入pre元素中。

不过，我认为您将很难以一种有用的方式呈现这些选项卡。您可能希望将其扩展到作者在输出之前使用的任何制表符。

使用<pre><code>...</code></pre>的示例

​

const Example = () => {
  const code =
`
import React from 'react';

class Foo extends React.Component {
    constructor() {
        super();
    }
}`;

  return (
    <div>
      <h1>Classes</h1>
      <h2>Classes</h2>
      <pre><code>{code}</code></pre>
    </div>
  );
}

ReactDOM.render(<Example/>, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

​

使用white-space样式的示例：

​

const Example = () => {
  const code =
`
import React from 'react';

class Foo extends React.Component {
    constructor() {
        super();
    }
}`;

  return (
    <div>
      <h1>Classes</h1>
      <h2>Classes</h2>
      <code className="block">{code}</code>
    </div>
  );
}

ReactDOM.render(<Example/>, document.getElementById("root"));

.block {
    display: block;
    white-space: pre;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

​

我还包括了display: block，因为默认情况下，code是内联的。