亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在react-admin中直接訪問dataProvider?

如何在react-admin中直接訪問dataProvider?

慕沐林林 2023-10-14 19:23:41
如何在react-admin中直接訪問dataProvider?我嘗試使用自定義 dataProvider但我不知道如何使用它。我的目標是使用地圖在輸出中顯示列表。//Contacts.js/// --- List ---export const ContactList = (props) => {  const classes = useStyles();  const {data} = useGetList('contacts', props.id);  return (     <List className={classes.list}>      {data.map(({id, name, person}) => (        <React.Fragment key={id}>          <ListItem button>            <ListItemAvatar>              <Avatar alt="Profile Picture" src={person}/>            </ListItemAvatar>            <ListItemText primary={name}/>          </ListItem>        </React.Fragment>      ))}    </List>  )};//App.jsconst App = () => (  <Admin dataProvider={dataProvider} layout={MyLayout}>    <Resource      name="contacts"      list={ContactList}      show={ShowContact}      edit={EditGuesser}      create={CreateContact}      icon={ContactPhoneIcon}/>  </Admin>);export default App;//DataProvider.jsimport fakeDataProvider from 'ra-data-fakerest';const dataProvider = fakeDataProvider({  contacts: [    {      id: 1,      name: "Tom",      numbers: {number: '09367371111', type: 'Mobile'},      person: '/static/images/avatar/5.jpg',    },    {      id: 2,      name: "Sara",      numbers: {number: '0936737999', type: 'Home'},      person: '/static/images/avatar/1.jpg',    },  ],});export default dataProvider;控制臺日志 
查看完整描述

1 回答

?
手掌心

TA貢獻1942條經驗 獲得超3個贊

您必須創建一個自定義列表渲染器來替代<Datagrid>,并將其作為 的子級傳遞<List>:


export const ContactList = (props) => {

? const classes = useStyles();

? return (

? ? ?<List className={classes.list}>

? ? ? ? <ContactSimpleList /<

? ? </List>

? )

};

該<List>組件創建一個, 并將,和ListContext放置在其中。因此,您可以通過列表渲染器中的上下文訪問此數據:idsdatatotal


import { useListContext } from 'react-admin';


const ContactSimpleList = () => {

? const { ids, data } = useListContext();

? return (

? ? <>

? ? ? {ids.map(id => (

? ? ? ? ? <ListItem key={id} button>

? ? ? ? ? ? <ListItemAvatar>

? ? ? ? ? ? ? <Avatar alt="Profile Picture" src={data[id].person}/>

? ? ? ? ? ? </ListItemAvatar>

? ? ? ? ? ? <ListItemText primary={data[id].name}/>

? ? ? ? ? </ListItem>

? ? ? ))}

? ? </>

? );

}

此外,您嘗試渲染的SimpleList 看起來很像由react-admin提供的本機組件:組件<SimpleList>。您可能不需要編寫自定義渲染器。



查看完整回答
反對 回復 2023-10-14
  • 1 回答
  • 0 關注
  • 162 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號