React 中的 JSON 展示组件 - 使用 JSON.stringify() 渲染 JSON 数据

在 React 中，可以使用 'JSON.stringify()' 方法将 JSON 对象转换为字符串，然后将其渲染到组件中。以下是一个简单的示例：

import React from 'react';

const JsonDisplay = ({ data }) => {
  const jsonString = JSON.stringify(data, null, 2);

  return (
    <pre>{jsonString}</pre>
  );
};

export default JsonDisplay;

在上面的代码中，'JsonDisplay' 组件接收一个名为 'data' 的属性，该属性是一个 JSON 对象。使用 'JSON.stringify()' 方法将 'data' 转换为字符串，并使用 '

' 标签将其渲染到组件中。'JSON.stringify()' 方法的第二个参数是一个可选的函数，用于控制字符串的缩进和格式化。

使用示例：
import React from 'react';
import JsonDisplay from './JsonDisplay';

const App = () => {
  const jsonData = {
    name: 'John Doe',
    age: 25,
    email: 'johndoe@example.com'
  };

  return (
    <div>
      <h1>JSON Display</h1>
      <JsonDisplay data={jsonData} />
    </div>
  );
};

export default App;

在上面的代码中，我们在 'App' 组件中创建了一个名为 'jsonData' 的 JSON 对象，并将其作为 'data' 属性传递给 'JsonDisplay' 组件。'JsonDisplay' 组件将 'jsonData' 对象以字符串形式展示在页面上。
注意：为了更好地显示 JSON 字符串，我们使用 '
' 标签来保留原始的格式和缩进。