ReactJS+MaterialUI v1自动嵌套列表填充

import React from 'react';
import { List, ListItem, Collapse } from '@material-ui/core';

class NestedList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };
  }

  handleClick = () => {
    this.setState((prevState) => ({
      open: !prevState.open,
    }));
  };

  renderNestedList = (data) => {
    return (
      <List>
        {data.map((item) => (
          <React.Fragment key={item.id}>
            <ListItem button onClick={this.handleClick}>
              {item.name}
            </ListItem>
            <Collapse in={this.state.open}>
              {item.children && this.renderNestedList(item.children)}
            </Collapse>
          </React.Fragment>
        ))}
      </List>
    );
  };

  render() {
    const data = [
      {
        id: 1,
        name: 'Parent 1',
        children: [
          {
            id: 2,
            name: 'Child 1',
          },
          {
            id: 3,
            name: 'Child 2',
          },
        ],
      },
      {
        id: 4,
        name: 'Parent 2',
        children: [
          {
            id: 5,
            name: 'Child 3',
          },
          {
            id: 6,
            name: 'Child 4',
          },
        ],
      },
    ];

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

export default NestedList;