[英]How to share an instance between 2 List components in a react-admin Resource
This is how components are instantiated in react-admin, but now I need to share the notifications instance between the PostList and the UserList.这就是在 react-admin 中实例化组件的方式,但现在我需要在 PostList 和 UserList 之间共享通知实例。 I would like to avoid a singleton. Is it possible to pass the 'notifications' object somehow to the lists?
我想避免使用 singleton。是否可以将“通知”object 以某种方式传递给列表?
import React from 'react';
import PostIcon from '@material-ui/icons/Book';
import UserIcon from '@material-ui/icons/People';
import { Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import { PostList } from './posts';
import { UserList } from './users';
import { Notifications } from './notifications';
var notifications = new Notifications();
const App = () => (
<Admin dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}>
<Resource name="posts" list={PostList} icon={PostIcon} />
<Resource name="users" list={UserList} icon={UserIcon} />
</Admin>
);
Thanks in advance.提前致谢。
It seemed to me that everything is well implemented: https://marmelab.com/react-admin/Theming.html#notifications在我看来,一切都得到了很好的实施: https://marmelab.com/react-admin/Theming.html#notifications
import { Layout } from 'react-admin';
import MyNotification from './MyNotification';
const MyLayout = (props) => <Layout {...props} notification={MyNotification} />;
const App = () => (
<Admin layout={MyLayout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
// ...
</Admin>
);
Passing custom props to the <Resource>
component was not quite working for me, so on trying out several different approaches, this was the one that suited my requirements.将自定义道具传递给
<Resource>
组件对我来说不太有效,因此在尝试了几种不同的方法后,这是适合我要求的方法。
So, there's a default prop which you can pass to the <Resource>
component called options
which accepts an object. Normally, you'd see this prop being used when you want to pull a label
into your resource.因此,有一个默认道具,您可以将其传递给名为
options
的<Resource>
组件,它接受 object。通常,当您想要将label
拉入您的资源时,您会看到使用此道具。 The idea is to customise this object -想法是定制这个 object -
// In App.js
<Admin dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}>
<Resource name="posts" list={PostList} icon={PostIcon} options={{ "label": "Posts", "notifications": notifications }} />
<Resource name="users" list={UserList} icon={UserIcon} options={{ "label": "Users", "notifications": notifications }} />
</Admin>
and then access it in your resource something like -然后在您的资源中访问它,例如 -
// In Posts.js
export const PostList = (props) => {
const { notifications, label } = props.options;
// You have your notifications object here now
return (
<List
{...props}
title={label}
bulkActionButtons={false}
exporter={false}>
<Datagrid>
<DateField showTime={true} sortable={true} source="created_on" label="Timestamp" />
</Datagrid>
</List>
);
};
Let me know if this worked for you!如果这对您有用,请告诉我!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.