使用JSX将代码渲染到页面，同时保留换行符[重复]答案

【问题标题】：render code to page using JSX whilst preserving line breaks [duplicate]使用JSX将代码渲染到页面，同时保留换行符[重复]
【发布时间】：2020-03-11 13:09:51
【问题描述】：

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

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

下面是我的代码

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

【问题讨论】：

你是对的，那里有一个错误，但它仍然有效，这不是问题的原因 - 我会相应地更新代码

标签： javascript reactjs string render jsx

【解决方案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 是内联的。

【讨论】：