如何使用ReactJS(+ Redux)系统地添加换行符作为内部HTML?

时间:2017-12-18 12:40:57

标签: javascript html reactjs redux

我在我的一个组件<p>{ result }</p>中有这些代码。 result将类似'asd\n123',以编程方式生成。

然而,浏览器中的结果是“asd 123”。看来,换行并不像内部HTML那样受欢迎。 如何在网页浏览器中显示“asd”然后换行,然后显示“123”?

2 个答案:

答案 0 :(得分:0)

尝试:

var result = 'asd' + (String.fromCharCode(13, 10) + 123;
<p>{ result }</p>

在ES6中:

var result = `asd${String.fromCharCode(13, 10)}123`;
<p>{ result }</p>

或者你必须更换你的\ n:

result.split('\n').join(String.fromCharCode(13, 10));
<p>{ result }</p>

工作单位:

var result = "some\nstring";
var res = result.split('\n').join(String.fromCharCode(13, 10));
console.log(res);

答案 1 :(得分:0)

根据@ casraf的评论,我将代码修改为:

{ result != undefined ? result.split('\n').map(line => <p>{ line }</p>) : '' }

解决这个问题。