前端项目实战柒拾陆react-admin+material ui-踩坑-List的基本用法

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣学习前端知识 

import { Link, Route, Routes, useNavigate } from "react-router-dom";
 
import { Admin, CustomRoutes, Layout, LayoutProps, ListGuesser, Resource, fetchUtils } from "react-admin";
import postgrestRestProvider, { IDataProviderConfig, defaultPrimaryKeys, defaultSchema } from '@raphiniert/ra-data-postgrest';
import { Collapse, Grid, ListItem, ListItemText, Paper, List } from "@material-ui/core";
import { RListData } from "./RServer/data";
import RFirst from "./RFirst";
 
const config: IDataProviderConfig = {
  apiUrl: '/postgrest',
  httpClient: fetchUtils.fetchJson,
  defaultListOp: 'eq',
  primaryKeys: defaultPrimaryKeys,
  schema: defaultSchema
}
const baseDataProvider = postgrestRestProvider(config);
const dataProvider = {
  ...baseDataProvider,
  //可以在这里添加越过dataProvider的数据访问
 
}
const appBar = (props: any) => {
  return (
    <></>
  )
}
const useAppMenu = () => {
  return (<></>)
}
const mySidebar = () => {
  return (<></>)
}
const appLayout = (props: LayoutProps) => {
  return (
    <Layout
      sx={
        {
          '& .RaLayout-appFrame': {
            minHeight: '100%',
            height: '100%',
            margin: 0,
            padding: 0
          },
          '& .RaLayout-content:': { marginTop: 0, marginBottom: 0, padding: 0, minHeight: '100%', height: '100%' },
          '& .RaLayout-contentWithSidebar': { margin: 0, padding: 0, minHeight: '100%', height: '100%' },
          minHeight: '100%',
          height: '100%',
          margin: 0,
          padding: 0,
        }
      }
      {...props}
      appBar={appBar}
      menu={useAppMenu}
      sidebar={mySidebar}
    />
  )
}
const RList = () => {
  const navigate = useNavigate();
  const handleLinkTo = () => {
    navigate('mySecondPage/');
  }
  const handleClickStyle = (dataUrl: any) => {
    const url = `${dataUrl}/`
    navigate(url)
    // setOpen(!open);
  };
  return (
    <div>
      <Grid style={{ margin: 0, padding: 0, display: "flex" }} >
        <Grid style={{ width: "200px", margin: "24px 0 0 24px" }} >
          <Paper>
            {RListData && RListData.map((item: any, i) => (
              <List style={{ margin: "0px 0px 0 24px" }} component="div">
                <ListItem button onClick={() => handleClickStyle(item.path)}>
                  <ListItemText primary={item.name} />
                </ListItem>
              </List>
            ))}
          </Paper>
        </Grid>
        <Grid style={{ flexGrow: "1", margin: "24px 0 0 24px" }} >
          <Admin
            dataProvider={dataProvider}
            basename='/rlist'
            layout={appLayout}
          >
            <Resource name='t_geyao_person' list={RFirst} />
            <CustomRoutes>
             
            </CustomRoutes>
          </Admin>
        </Grid>
      </Grid>
 
    </div>
  )
}
 
export default RList;

import React from 'react'
import { List,Datagrid,TextField,EditButton,DeleteButton,BooleanField } from 'react-admin'
const RFirst = (props: any) => {
    return <List {...props} exporter={false}>
         <Datagrid>
            <TextField source='id'></TextField>
            <TextField source='name'></TextField>
            <TextField source='sex'></TextField>
            <TextField source='salary'></TextField>
            <BooleanField source='status'></BooleanField>
            <EditButton></EditButton>
            <DeleteButton></DeleteButton>
         </Datagrid>
    </List>
}
 
export default RFirst

运行结果