Warm tip: This article is reproduced from serverfault.com, please click

javascript-如何直接在react-admin中访问dataProvider?

(javascript - How do I access the dataProvider directly in react-admin?)

发布于 2020-12-06 20:40:57

如何直接在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;

Console.log Console.log

Questioner
Iman Jalali
Viewed
0
François Zaninotto 2020-12-09 05:39:14

你必须创建一个自定义列表渲染器,以替代<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 管理员提供:<SimpleList>组件你可能不需要编写自定义渲染器。