第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

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

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

慕沐林林 2023-10-14 19:23:41
如何在react-admin中直接訪問dataProvider?我嘗試使用自定義 dataProvider但我不知道如何使用它。我的目標(biāo)是使用地圖在輸出中顯示列表。//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;控制臺(tái)日志 
查看完整描述

1 回答

?
手掌心

TA貢獻(xiàn)1942條經(jīng)驗(yàn) 獲得超3個(gè)贊

您必須創(chuàng)建一個(gè)自定義列表渲染器來替代<Datagrid>,并將其作為 的子級(jí)傳遞<List>:


export const ContactList = (props) => {

? const classes = useStyles();

? return (

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

? ? ? ? <ContactSimpleList /<

? ? </List>

? )

};

該<List>組件創(chuàng)建一個(gè), 并將,和ListContext放置在其中。因此,您可以通過列表渲染器中的上下文訪問此數(shù)據(jù):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提供的本機(jī)組件:組件<SimpleList>。您可能不需要編寫自定義渲染器。



查看完整回答
反對 回復(fù) 2023-10-14
  • 1 回答
  • 0 關(guān)注
  • 177 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)