使用嵌套的map()显示数据的React类组件

import React from 'react';

class NestedMapExample extends React.Component {
  renderData(data) {
    return (
      <ul>
        {data.map((item, index) => {
          if (Array.isArray(item)) {
            return (
              <li key={index}>
                <ul>{this.renderData(item)}</ul>
              </li>
            );
          } else if (typeof item === 'object') {
            return (
              <li key={index}>
                <ul>
                  {Object.entries(item).map(([key, value]) => (
                    <li key={key}>
                      {key}: {value}
                    </li>
                  ))}
                </ul>
              </li>
            );
          } else {
            return <li key={index}>{item}</li>;
          }
        })}
      </ul>
    );
  }

  render() {
    const data = [
      'Item 1',
      'Item 2',
      ['Nested Item 1', 'Nested Item 2'],
      { key1: 'Value 1', key2: 'Value 2' },
    ];

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

export default NestedMapExample;