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