在react中使用/n换行字符

问题

写页面的的时候遇到了一个小问题,jsx无法解析/n换行符,下面是代码和效果

class Msg extends Component {
  state = {
   html: "+ 86-755-29977605 /n + 86 - 755 - 29748810 /n + 86 - 755 - 29977005";
  };
  render() {
    return (
      <div className="msg">
       {this.state.html}
      </div>
    );
  }
}

实际效果
在这里插入图片描述

解决方式

使用br换行符嵌入到html,即可解决,如下

class Msg extends Component {
  state = {
   html: "+ 86-455-29447605 <br/>+ 86 - 754 - 29448810 <br/> + 84 - 755 - 29447045";
  };
  render() {
    return (
      <div className="msg" dangerouslySetInnerHTML={{ __html: this.state.html }}/>
    );
  }
}

换行成功
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_36990322/article/details/89373564