react中使用pre標簽不生效的解決方法

一、react中使用pre標簽

　　react中代碼：

<pre>
   我尋你千百度 日出到遲暮
   一瓢江湖我沉浮
   我尋你千百度 又一歲榮枯
   可你從不在 燈火闌珊處
</pre>

　　界面展示效果：

 正常情況下，使用pre標簽，pre標簽中的內容都會原樣展示，但是目前來看，並沒有換行效果，這是因為JSX會去除換行，導致pre標簽失效。

二、解決方法

　　1、使用反引號即模板字符串來解決

<pre id='preId'>{`我尋你千百度 日出到遲暮
一瓢江湖我沉浮
我尋你千百度 又一歲榮枯
可你從不在 燈火闌珊處
`}
</pre>

　　2、加換行符\n來解決

<pre id='preId1'>
   我尋你千百度 日出到遲暮{'\n'}　　　　//加入\n需要使用{}
   一瓢江湖我沉浮{'\n'}
   我尋你千百度 又一歲榮枯{'\n'}
   可你從不在 燈火闌珊處
</pre>

　　3、兩種方法在頁面中展示效果

　　

 　　這樣就可以正常的使用pre標簽了