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

Question

我正在尝试在 JSX.When 中使用 pre 标签你在 JSX 中使用 pre 标签，它根本没有格式化。为什么？为了使用 pre 标签，我需要做这样的事情：

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

为什么？

Answer 1

使用模板文字

Template literals 允许使用保留 leading/trailing 白色-space 和新行的多行字符串。

const pythonCode = `
    print(
        "Hello, World!"
    )
`

class PreFormattedCode extends React.Component {
    render() {
      return <React.Fragment>{pythonCode}</React.Fragment>
    }
}

ReactDOM.render(<PreFormattedCode />, document.getElementById('code'))

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

<!-- The content rendered into this tag will preserve whitespace -->
<pre id="code"></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> 标签手动添加换行符、分号和其他代码格式，您可以使用标签模板文字 return 正确的输出为你。只需为其提供要输出的变量！

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 中为一个星球大战 api 项目做了这个。这是我的 header.

    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>

希望得到帮助。

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

Formatting code with <pre> tag in React and JSX

html

javascript

reactjs

react-jsx

使用模板文字

模板文字表达式

标记的模板文字