在 React 和 JSX 中使用 <pre> 标记格式化代码答案

【问题标题】：Formatting code with <pre> tag in React and JSX在 React 和 JSX 中使用 <pre> 标记格式化代码
【发布时间】：2016-10-17 07:17:01
【问题描述】：

我正在尝试在 JSX 中使用 pre 标记。当您在 JSX 中使用 pre 标记时，它根本不会格式化。为什么？为了使用 pre 标记，我需要执行以下操作：

const someCodeIWantToFormat = "var foo = 1"
const preBlock = { __html: "<pre>" + pythonCode + "</pre>" };
return(
  <div dangerouslySetInnerHTML={ preBlock } />;
)

为什么？

【问题讨论】：

我会这样实现：const someCodeIWantToFormat = "var foo = 1"; const preBlock = (<pre> pythonCode </pre>); render(){ return (<div>{this.preBlock}</div>) };im using es6
哎呀。是的，我才发现我打错了。在我的代码中，我有你描述的方式

标签： javascript html reactjs react-jsx

【解决方案1】：

使用模板字面量

Template literals 允许使用保留前导/尾随空格和新行的多行字符串。

class SomeComponent extends React.Component {
   render() {
        return (
          <pre>{`
            Hello   ,   
            World   .
          `}</pre>
        )
    }
}

class SomeComponent extends React.Component {
   render() {
        return (
          <pre>{`
            Hello   ,   
            World   .
          `}</pre>
        )
    }
}

ReactDOM.render(
  <SomeComponent />, 
  document.getElementById('pre')
)

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

<!-- The content rendered into this tag should match the content below. -->
<div id="pre"></div>

<pre>
            Hello   ,
            World   .
</pre>

【讨论】：

【解决方案2】：

Gfullam 发布了一个很好的答案。

我将对其进行一些扩展并提供一些替代解决方案。对于您的特定情况，其中大多数可能过度杀伤。但是，我相信您（和潜在的未来读者）可能会发现这些有用。 请注意，这些需要 ES6。

模板文字表达

由于您已经将代码存储在变量中，因此您可以使用模板文字表达式。如果您有很多变量或想要控制输出，这可能会更可取。

class SomeComponent extends React.Component {
   render() {
     var foo = 1;
     var bar = '"a b   c"';
        return (
          <pre>{`
            var foo = ${foo};
            var bar = ${bar};
          `}</pre>
        )
    }
}

ReactDOM.render(
  <SomeComponent />, 
  document.getElementById('content')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="content"></div>

在这个特定的实现中可能不需要，但最好知道它也可以在括号内进行函数调用和其他操作。

CodePen

标记的模板文字

如果您不想为<pre> 标记手动添加换行符、分号和其他代码格式，您可以使用标记模板文字为您返回正确的输出。只需为其提供要输出的变量！

class SomeComponent extends React.Component {
  pre(strings, variables) {
    return variables.map((v, i) => {
      return `var ${v.name} = ${v.value};
`
    })
  } 
  
  render() {
     var variables = [{name: "foo", value: 1},{name: "bar", value: '"a b   c"'}];
     return <pre>{this.pre`${variables}`}</pre>;
    }
}

ReactDOM.render(
  <SomeComponent />, 
  document.getElementById('content')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="content"></div>

PS：这不是很棒吗！？

CodePen

【讨论】：

【解决方案3】：

在 jsx 中格式化的一个好方法是使用 String.raw 和模板文字，然后在 jsx 中使用 pre 标记。如果您正在执行此类操作，这有助于消除任何逃逸问题。

我在 React 中为一个星球大战 api 项目做了这个。这是我的标题。

    const Header = () => {

        var title = String.raw`
             ___| |_  ___  _____ __      _  ___  _____ ___
            / __| __|/ _  |  __/ \ \ /\ / // _  |  __// __|
            \__ | |_  (_| | |     \ V  V /  (_| | |   \__ |
            |___/\__|\__,_|_|      \_/\_/  \__,_|_|   |___/
        `;
        return (
            <div>
                <pre> {title} </pre>
            </div>
        )
    };

    export default Header;

【讨论】：

【解决方案4】：

使用

<pre>
  {JSON.stringify(yourdataobject, null, 2)}
</pre>

渲染对象

【讨论】：

【解决方案5】：

试试这个

    <Row key={i} className="question">
      <Col xs="12" className="article" >
        Article {article + 1})
      </Col>
      <Col xs="12">
        <pre>{`${v.QuestionDesc}`}</pre>
      </Col>
   </Row>

希望得到帮助。

【讨论】：