在HTML页面写入\r\n换行不生效的解决方法

在实际开发中，我们经常会遇到把后端返回的数据（比如数组里面的内容）换行展示在页面。

我们经常会这样处理，这样会在控制台输出，数据是换行展示的。

        let arr = ['张三','李四','王五'];
        console.log(arr.join('\r\n'));

但是将处理后的数据放在页面时，换行则不能生效。因为html不识别\r\n。会把其解析成空白

具体解决方法是可以给对应的div设置css。white-space可以指定元素内的空白以怎样的方式处理。

// 合并空白符序列，但是保留换行符。
white-space: pre-line;

具体运用如下 

<div style={{whiteSpace: 'pre-line'}}>{errorReason}</div>