在jsx中实现字符串换行,首先需要换行的核心属性就是css中的white-space
首先我们先设置样式css
.DetailsTitle{
width: 100%;
word-wrap: break-word;
white-space: pre-wrap;
}
为了方便对比,我们写3种实现的方式
<View className='DetailsTitle'>{'1、20210817全流程测试试卷\n2、考试须知二\n3、考试须知三'}</View>
<View className='DetailsTitle'>{'后台返回测试'}</View>
<View className='DetailsTitle'>{notesec}</View>
<View className='DetailsTitle'>{'dangerousHtml测试'}</View>
<View className='DetailsTitle' dangerouslySetInnerHTML={
{ __html: notesec }} ></View>
后台返回的字符串如下:
1、20210817全流程测试试卷/\n2、考试须知二\n3、考试须知三\\n4、考试须知四;5、考试须知四
可以看到如果直接将带有\n的字符串返回,是可以实现换行的。但是当这段字符串放到变量中,就不会实现换行了二和三之间是/n 没有换行