在react js中呈现嵌套的json数据

在React.js中呈现嵌套的JSON数据可以通过递归的方式来实现。下面是一个示例代码：

import React from 'react';

const NestedJson = ({ data }) => {
  const renderData = (data) => {
    if (Array.isArray(data)) {
      return data.map((item, index) => (
        <li key={index}>{renderData(item)}</li>
      ));
    } else if (typeof data === 'object') {
      return (
        <ul>
          {Object.entries(data).map(([key, value]) => (
            <li key={key}>
              <strong>{key}: </strong>
              {renderData(value)}
            </li>
          ))}
        </ul>
      );
    } else {
      return data;
    }
  };

  return <div>{renderData(data)}</div>;
};

export default NestedJson;

在上面的代码中，我们定义了一个名为NestedJson的组件，它接收一个data参数作为输入。renderData函数用于递归地渲染嵌套的JSON数据。如果data是一个数组，我们使用map方法遍历数组中的每个元素，并递归调用renderData函数进行渲染。如果data是一个对象，我们使用Object.entries方法将其转换为键值对数组，并使用map方法遍历每个键值对进行渲染。最后，如果data是一个基本类型的值，直接返回该值。

使用示例：

import React from 'react';
import NestedJson from './NestedJson';

const App = () => {
  const data = {
    name: 'John',
    age: 30,
    hobbies: ['reading', 'coding'],
    address: {
      street: '123 Main St',
      city: 'New York',
      country: 'USA'
    }
  };

  return (
    <div>
      <h1>Nested JSON Data</h1>
      <NestedJson data={data} />
    </div>
  );
};

export default App;

在上面的示例中，我们创建了一个名为App的组件，并定义了一个嵌套的JSON数据对象data。然后，我们在组件中使用NestedJson组件来呈现这个嵌套的JSON数据。

这是一个简单的示例，你可以根据实际需求进行修改和扩展。关于React.js的更多信息和学习资源，你可以参考腾讯云的React.js产品介绍页面：React.js产品介绍。