@ozo/react-rock/src/pages/List/List.jsx

React 移动端开发脚手架，基于CRA3，通用、开箱即用。

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { Icon, Placeholder } from '@/components';
import { Divider, Typography, List, ListItem, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core';
import styles from './List.module.scss';
import typeList from './config.js';

const ExpandMoreIcon = () => {
    return (
        <Icon name="arrow-back" style={{ fontSize: '23px', transform: 'rotate(180deg)', transformOrigin: '50% 50%' }} />
    );
};
@withRouter
class ListDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // activeKey: 0,
        };
    }

    render() {
        return (
            <div className={styles.content}>
                {typeList.map((data) => (
                    <Accordion
                        key={data.type}
                        disabled={!data.list.length}
                        style={{ minHeight: '30px', width: '100%', boxShadow: 'none' }}
                    >
                        <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="panel1a-content"
                            id="panel1a-header"
                        >
                            <Typography>{data.title}</Typography>
                        </AccordionSummary>
                        <AccordionDetails>
                            <List style={{ width: '100%' }}>
                                {data.list.map((item) => (
                                    <React.Fragment key={item.id}>
                                        <ListItem>
                                            <span>{`${item.id} ${item.title}`}</span>
                                        </ListItem>
                                        <Divider />
                                    </React.Fragment>
                                ))}
                            </List>
                        </AccordionDetails>
                    </Accordion>
                ))}
                <Placeholder msg="没有更多了！" />
            </div>
        );
    }
}

export default ListDemo;