码迷,mamicode.com
首页 > 其他好文 > 详细

react中使用pre标签不生效的解决方法

时间:2020-06-02 13:32:54      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:页面   http   效果   reac   png   没有   alt   字符   需要   

一、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标签了

react中使用pre标签不生效的解决方法

标签:页面   http   效果   reac   png   没有   alt   字符   需要   

原文地址:https://www.cnblogs.com/minorf/p/13030398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!