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

JavaScript

西里飞云

2020-03-13

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

<textarea value={address} />

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

<p>{address}</p>

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

第1536篇《从保存的文本区域反应显示换行符》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

MandyJinJin 2020.03.13

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

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

十三西里古一 2020.03.13

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

white-space: pre-line;

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android