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

Posted 2023-02-22

【中文标题】在 React 和 JSX 中使用 <pre> 标记格式化代码

【英文标题】：Formatting code with <pre> tag in React and JSX

【发布时间】：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

哎呀。是的，我才发现我打错了。在我的代码中，我有你描述的方式

【参考方案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>

希望得到帮助。