react 中实现TextArea输入文本换行及数据反显换行

要实现输入换行及反显数据时换行,只需要添加css样式whiteSpace:'pre-wrap'

1.输入换行

<TextArea rows={4} showCount maxLength={300} style={
   
   {whiteSpace:'pre-wrap'}}/>

2.反显换行

在需要反显数据的元素上添加whiteSpace:'pre-wrap'即可,我反显数据使用的组价是Descriptions.Item

<Descriptions.Item label="问题情况" span={4} style={
   
   {whiteSpace:'pre-wrap'}}>
   {detail?.description}
</Descriptions.Item>

whiteSpace具体参数配置可参考以下:

实现效果

猜你喜欢

转载自blog.csdn.net/Sylvasylva/article/details/125280905