从保存的文本区域反应显示换行符

西里飞云2020-03-13

使用Facebook React。在设置页面中，我有一个多行textarea，用户可以在其中输入多行文本（在我的情况下为地址）。

<textarea value={address} />

当我尝试显示地址时，例如{address}，它不会显示换行符，而是全部显示在一行上。

<p>{address}</p>

任何想法如何解决这个问题？

MandyJinJin2020/03/13 20:17:47

喜欢webit版本。我不知道Fragment组件，它是如此有用。无需使用reduce方法。地图就足够了。另外，list确实需要在react中输入键，但是使用迭代方法中的index却是个坏习惯。eslint会继续警告我，直到出现混乱错误为止。所以看起来像这样：

const NewLine = ({ children }) =>
   children.split("\n").map(line => (
    <Fragment key={uuidv4()}>
      {line}
      <br />
    </Fragment>
  ));

十三西里古一2020/03/13 20:17:47

解决方案是white-space在显示您的内容的元素上设置属性textarea：

white-space: pre-line;

Newest Answer