首页 > 其他分享 >前端项目实战壹佰肆拾肆react-admin+material ui-react-admin之useList之isFetching

前端项目实战壹佰肆拾肆react-admin+material ui-react-admin之useList之isFetching

时间:2023-11-25 11:31:51浏览次数:26  
标签:const admin 前端 material useList react isFetching

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端技术群

import {
    useList,
    ListContextProvider,
    Datagrid,
    TextField,
    useGetList
} from 'react-admin';
 

export const RUserListData = () => {
    const { data, isFetching } = useGetList(
        't_geyao_person',
        { page: 1, perPage: 10 }
    );
    const listContext = useList({ data, isFetching });
   
    return (
        <ListContextProvider value={listContext}>
            <Datagrid>
                <TextField source="id" />
                <TextField source="name" />
            </Datagrid>
        </ListContextProvider>
    );
};

运行结果

 

前端项目实战壹佰肆拾肆react-admin+material ui-react-admin之useList之isFetching_ide



标签:const,admin,前端,material,useList,react,isFetching
From: https://blog.51cto.com/u_14476028/8558595

相关文章

  • 前端项目实战壹佰肆拾叁react-admin+material ui-react-admin之useList之filterCallba
    我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进入前端技术群import{useList,ListContextProvider,Datagrid,TextField}from'react-admin';exportconstRUserList=()=>{constlistContext=useList({data:......
  • React 组件之状态
    没有什么是不可能的,只是需要找到正确的方法。1.什么是状态?状态就是组件内部特有数据的载体(组件数据挂载方式),改变数据页面就会刷新,由组件自己设置和更改,也就是说由组件自己产生、维护,使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理),这在React中称为:条件渲染......
  • React 组件之样式
    无论你的梦想有多么高远,记住,一切皆有可能。我们从前面的学习知道一个React组件不仅仅只包含DOM结构的,还应该样式和Javascript逻辑的。这里我们学习下如何构建CSS样式。1.逻辑表示JSX中使用大括号语法来包裹JS表达式(简单逻辑代码)。例如:{1+1}{表达式/对象/......
  • react开发 jest写单元测试 如何借助mock模拟实现接口返回文件流的下载测试
    要借助mock模拟实现接口返回文件流的下载测试,可以使用以下步骤:1.创建一个用于接收文件流的虚拟DOM元素,例如通过`document.createElement('a')`创建一个`<a>`元素。2.使用`URL.createObjectURL()`方法将文件流转换为URL。3.设置创建的虚拟DOM元素的`href`属性为URL,同时设置`dow......
  • react antd 表格固定高度
    <divclassName="ad-body"><TableclassName="area-drawing-table"rowClassName={(record,index)=>index===selectIndex?'ant-table-row-selected':''}rowKey={record=>recor......
  • 视觉差缓动效果的轮播--React版
    React实现视觉差效果缓动轮播效果如下(图片帧率低看起来有点卡顿,看个大概就行):分享一下思路:1.正常引入一个轮播组件(站在巨人肩膀省时省力),去除指示点、引导箭头等不需要的元素,有些组件支持配置,不支持就手动覆盖CSS样式了2.找到组件中用于显示展示当前图片的类名3.添加transform......
  • 在React中使用`typeit`库
    在React中使用typeit库安装npminstalltypeit-react在需要用到的组件导入,使用importTypeItfrom"typeit-react";consttext()=>{return(<div><TypeIt>文字打字效果</TypeIt></div>);};exportdefaulttext使用option方式配......
  • React中store的使用(redux、redux-tookit)及store数据持久化(redux-persist)
    React中store的使用(redux、redux-tookit)及store数据持久化(redux-persist)安装npminsatllreact-reduxnpminstall@reduxjs/toolkitnpminstallredux-persist简单使用store//counterSlice.jsimport{createSlice}from'@reduxjs/toolkit'exportconstcounter......
  • panjiachen的vue-admin-template中关闭eslint
    由于有语法检查,所以我想关闭eslint低版本:  在conf/index.js中将useEslint改为flase高版本:  在.eslintrc.js中有rules,这里边都是eslint的校验规则,如果你不想有校验,可以直接将rule括号中的规则都注释掉   ......
  • 前端项目实战叁佰伍拾陆react-admin和material ui-处理形成树状数据结构2
    dataProviders.getStyleTree('t_prod_category','t_prod_style').then((res:any)=>{console.log(res,"resssssssss")letarr:any=[]letarr1:any=[{key:0,title:"品类管理",......