循环遍历深度嵌套的属性- React

import React from 'react';

function renderNestedProperties(data) {
  if (Array.isArray(data)) {
    return data.map((item, index) => (
      <div key={index}>{renderNestedProperties(item)}</div>
    ));
  } else if (typeof data === 'object' && data !== null) {
    return Object.keys(data).map((key, index) => (
      <div key={index}>
        <strong>{key}: </strong>
        {renderNestedProperties(data[key])}
      </div>
    ));
  } else {
    return <div>{data}</div>;
  }
}

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

  return <div>{renderNestedProperties(nestedData)}</div>;
}

export default App;