如何使用ReactJS（+ Redux）系统地将换行符添加为内部HTML？

Question

I have these codes, in one of my component: <p>{ result }</p> . result will be like 'asd\\n123' , generated programmatically.

However the result in browser is "asd 123". It seems, the line break is not well received as inner HTML. How can I have "asd" and then line break and then "123" displayed in my web browser?

Answer 1

Try with:

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

In ES6:

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

Or you have to replace your \\n:

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

WORKING SNIPPET:

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

Answer 2

Based on @casraf's comment, I modified the codes into like this:

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

To solve this problem.