react换行

问题描述：无法匹配接口返回的\n字符，不能自动换行

解决方法

方法一、

1
2
3
4
// 如果是\n使用正则匹配之后替换为<br />
// text为变量
<div dangerouslySetInnerHTML={{__html:String(text).replace(/[\r\n]/g, '<br/>')}}></div>
// 如果直接是<br />则不用使用正则匹配

方法二、

在父节点中添加css属性 whiteSpace: ‘pre-wrap’
然后下面任选一种

  • 字符串中使用\n添加换行符
  • 使用``包裹字符串
    1
    <div style={{whiteSpace: 'pre-wrap'}}>{text}</div>

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

勤奋的代码搬运工<br>一位刚出来实习的前端程序员<br>谢谢大家