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

Question

我试图在JSX中使用pre标签.当你在JSX中使用pre标签时,它根本不格式化.为什么？为了使用pre标签,我需要做这样的事情:

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

为什么？

Answer 1

使用模板文字

模板文字允许使用多行字符串,以保留前导/尾随空格和新行.

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>

Answer 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

Answer 3

使用

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

渲染对象

Answer 4

在 jsx 中格式化的一个好方法是使用String.raw模板文字，然后使用prejsx 中的标签。如果您正在做这样的事情，这有助于消除任何逃逸问题。

我在 React 中为一个 starwars api 项目做了这个。这是我的标题。

    const Header = () => {

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

    export default Header;