reactjs里  不显示空格

Question

render() {

    return (
        <div>
        &nbsp;
        </div>
    );
}这样写空格正常显示

render() {

    let text = ' ';
    return (
        <div>
        {text}
        </div>
    );
} 这样写的时候就直接显示符号了

Answer 1

这样写是会直接当成字符串来渲染的。

即使你写的是

let text = '<span>333</span>';
    return (
        <div>
        {text}
        </div>
    );

也会把<span>333</span>一起渲染出来

正确的做法是用的dangerouslySetInnerHTML属性，官方说这样可以避免受到 cross-site scripting (XSS) 攻击

let text = ' ';
    return (
        <div dangerouslySetInnerHTML={{__html: text }} />
    );

Answer 2

建议插入<pre></pre>标签