使用 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 styles to it, or put it in a 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 是内联的。

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

render code to page using JSX whilst preserving line breaks

javascript

string

render

jsx

reactjs