在 React 应用程序中将字符串 "{\n \"code\" : 200,\n \"codeDesc\" : \"操作成功\" \n }" 转换为 JSON 格式并进行展示
时间: 2023-08-21 22:02:15 浏览: 41
在 React 中,你可以使用 `JSON.parse()` 方法将字符串转换为 JSON 格式的对象,并使用 `JSON.stringify()` 方法将其格式化为字符串进行展示。
以下是一个示例代码,展示了如何将字符串 `"{\n \"code\" : 200,\n \"codeDesc\" : \"操作成功\" \n }"` 转换为 JSON 格式并进行展示:
```jsx
import React from 'react';
function App() {
const jsonString = `{\n "code": 200,\n "codeDesc": "操作成功"\n}`;
const jsonData = JSON.parse(jsonString);
const formattedJsonString = JSON.stringify(jsonData, null, 2);
return (
<div>
<h1>JSON Data</h1>
<pre>{formattedJsonString}</pre>
</div>
);
}
export default App;
```
在上面的代码中,我们首先定义了一个包含 JSON 字符串的变量 `jsonString`。然后,我们使用 `JSON.parse()` 方法将该字符串转换为 JSON 格式的对象,并将结果存储在变量 `jsonData` 中。
接下来,我们使用 `JSON.stringify()` 方法将 `jsonData` 对象转换回字符串形式,并通过指定 `null, 2` 参数来进行缩进和格式化。
最后,我们在组件返回中使用 `<pre>` 标签来展示格式化后的 JSON 字符串。
通过上述代码,你可以在 React 应用程序中将字符串 `"{\n \"code\" : 200,\n \"codeDesc\" : \"操作成功\" \n }"` 转换为 JSON 格式,并以漂亮的形式进行展示。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)