使用<pre> tag in React and JSX

Question

I am trying to use the pre tag inside of JSX.When you use the pre tag in JSX, it doesn't format at all. Why? In order to use the pre tag I need to do something like this:

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

Why?

Answer 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>

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

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

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

    const Header = () => {

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

    export default Header;

Answer 4

使用

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

渲染对象

Answer 5

尝试一下

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

希望获得帮助。