Question

是否可以在<div>中使用带有换行符的变量？

class Hello extends React.Component {
  render() {

    const texts = {
        subHeaderText: 'first line \n second line'
    };

    return <div>{texts.subHeaderText}</div>;
  }
}

我希望得到结果

first line 
second line

最简单的方法是什么？

https://jsfiddle.net/69z2wepo/263117/

Answer 1

您可以使用p（段落）标签。看看这个网站： https://forum.freecodecamp.org/t/newline-in-react-string-solved/68484/7

Answer 2

div{
  white-space: pre-line;
}

将此添加到html的css文件中。每当遇到/n或<br>时，这将自动创建换行符。这是最简单的方法。

作为建议，由于它看起来像是一个硬代码，因此您最好同时使用两个单独的<p>或<div>，如下所示：

<div>
    <p>
         first line
    </p>
    <p>
         second line
    </p>
</div>

除非您真的想显示输入的换行符，否则这种方式会更加优雅。鉴于您也可以像下面这样的js方法进行处理：

texts.subHeaderText.split('\n').map((item, i) => {
    return <p key={i}>{item}</p>;
});

div中的换行符内部变量

2 个答案: