尝试构建React组件，该组件可以遍历嵌套的数据结构并根据类型生成带样式的HTML元素

import React from 'react';

class DataStructureComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 遍历嵌套数据结构并生成HTML元素 */}
      </div>
    );
  }
}

export default DataStructureComponent;

import React from 'react';

class DataStructureComponent extends React.Component {
  renderData(data) {
    if (Array.isArray(data)) {
      // 如果是数组类型，遍历数组并递归调用renderData方法
      return data.map((item, index) => (
        <div key={index}>{this.renderData(item)}</div>
      ));
    } else if (typeof data === 'object') {
      // 如果是对象类型，遍历对象的属性并递归调用renderData方法
      return Object.keys(data).map((key, index) => (
        <div key={index}>
          <strong>{key}: </strong>
          {this.renderData(data[key])}
        </div>
      ));
    } else {
      // 其他类型直接生成HTML元素
      return <span>{data}</span>;
    }
  }

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

    return (
      <div>
        {this.renderData(nestedData)}
      </div>
    );
  }
}

export default DataStructureComponent;