如何直接在react-admin中访问dataProvider?我尝试使用自定义 dataProvider,但我不知道如何使用它。我的目标是使用 map在输出中显示列表。
//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.js
const App = () => (
<Admin dataProvider={dataProvider} layout={MyLayout}>
<Resource
name="contacts"
list={ContactList}
show={ShowContact}
edit={EditGuesser}
create={CreateContact}
icon={ContactPhoneIcon}/>
</Admin>
);
export default App;
//DataProvider.js
import 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;
你必须创建一个自定义列表渲染器,以替代<Datagrid>
,并将其作为以下子代传递<List>
:
export const ContactList = (props) => {
const classes = useStyles();
return (
<List className={classes.list}>
<ContactSimpleList /<
</List>
)
};
该<List>
组件创建ListContext
,并放置ids
,data
并total
在里面。因此,你可以通过列表渲染器中的上下文访问此数据:
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 管理员提供:该<SimpleList>
组件。你可能不需要编写自定义渲染器。