reactjs - 模板文字在反应中不起作用

Question

我的代码如下。模板文字不在 span 标签中创建多行字符串，而在控制台中创建多行。

import React, {Component} from 'react';

import ReactDOM from 'react-dom';


class MyApp extends Component {

    render() {

        console.log(`string text line 1
        string text line 2`);

        let test = `dfas dss
        sdassas`;

        return (
            <span>{test}</span>
        )
    }
}

ReactDOM.render(
    <MyApp />,
    document.getElementById('app')
  );

Answer 1

HTML 将空格折叠成一个空格。请参阅为什么 HTML 要求多个空格在浏览器中显示为单个空格？

最简单的解决方案是告诉 span它不应该折叠 whitespace。

以下代码片段向您展示了这与 React 无关，以及如何在 HTML 中显示换行符

<h2>Using white-space: pre</h2>
<span style="white-space: pre">       
    
    Hello this
    
    has new lines
</span>
    
<h2>Collapsing white space</h2>
<span>
    
    Hello this
    
    has new lines
    
</span>

Answer 2

使用 JSX 时，这是为我解决的问题：

  <span style={{ whiteSpace: 'pre' }}>
      {`
          Some
          multiline
          text
      `}
  </span>