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将空白折叠到一个空格中。见Why does HTML require that multiple spaces show up as a single space in the browser?

最简单的解决方案是告诉it should not collapse whitespace。

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

＆＃13;

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

＆＃13;

Answer 2

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

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

模板文字不起作用

2 个答案: