javascript - 使用 JSX 将代码渲染到页面，同时保留换行符

Question

这个问题已经有答案了:

Why does HTML5 recommend putting the code element inside pre? (5 个回答)

已关闭 3 年前。

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

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

下面是我的代码

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 是内联的。