React中使用pre标签

最新推荐文章于 2024-04-07 10:16:44 发布

码农小菲

最新推荐文章于 2024-04-07 10:16:44 发布

阅读量1.4k

点赞数 1

分类专栏： react 文章标签： javascript react html5

本文链接：https://blog.csdn.net/xbczrz/article/details/118515457

版权

react 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

本文介绍了在React项目中如何使用pre标签来展示后端返回的复杂JSON数据。通过JSON.stringify()方法将对象数组转换为字符串，解决在pre标签内直接显示对象导致的错误。同时讲解了JSON.stringify()的换行缩进功能，以及JSON.parse()的使用，帮助理解数据转换过程。

摘要由CSDN通过智能技术生成

需求：在react项目中，直接展示后端回传的数据。(格式是[{[{}]},{[{}]}],格式反正挺复杂的。)
思路：pre标签可以直接展示数据
问题：后端回传的是对象数组等、在使用pre标签中直接展示数据报错；

解决：将json格式转换成字符串格式

pre标签------简单理解

HTML中的pre标签定义与用法：

常用于表示计算机源代码；
可用于在页面中直接展示后端回传的数据等；
元素可定义预格式化的文本；被包围在 pre 元素中的文本通常会保留空格和换行符；而文本也会呈现为等宽字体；

JSON格式数据转换字符串格式

JSON.stringify()

将 JavaScript 对象转换为 JSON 字符串；

JSON.parse()

将JSON字符串转为一个对象；

JSON.stringify() 换行缩进

语法：JSON.stringify(value[, replacer[, space]])
   参数说明：
       value: 必需，要转换的 JavaScript 值（通常为对象或数组）
       replacer: 可选，用于转换结果的函数或数组
       space: 可选，文本添加缩进、空格和换行符

  JSON.stringify(data, null, 2);

React中使用pre标签展示对象

   return (
      <>
         <pre>{state.data}</pre>    //当data是字符串类型时
          <pre>{JSON.stringify(state.data)}</pre>    //当data是对象或数组时需要转成字符串
           <pre>{JSON.stringify(state.data,null,2)}</pre>    //换行、缩进两字符
      </>
  )