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

React是一个流行的JavaScript库，用于构建用户界面。在React中，可以使用嵌套的map()函数来显示数据。当数据以嵌套的方式组织时，例如嵌套的对象或数组，可以通过map()函数递归地遍历和渲染数据。

下面是一个使用嵌套的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;

在这个示例中，我们定义了一个名为NestedMapExample的React类组件。renderData()函数用于递归地渲染数据。对于每个元素，我们使用map()函数进行遍历，并根据元素的类型进行不同的处理：