最近有一个小优化需要完成换行功能。

场景

这个场景是往一个组件里面塞进去文本，我想让这个文本在组件里有换行操作。这个时候不方便修改组件使用dangerouslySetInnerHTML，所以需要使用其他办法。

解决方案

定义一个css类：

.display-linebreak {
    white-space: pre-line;
}

然后给这个组件中包裹文本的容器使用这个css类：

render() {
  const text = 'One \n Two \n Three';
  return ( 
     <div className="display-linebreak"> 
        {text} 
     </div>
  );
}

这样，只要遇到 \n 就会换行。

在下面的参考链接中，还有更多好玩的换行方法可以参考。