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

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 中显示换行符

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