[英]How to share an instance between 2 List components in a react-admin Resource
這就是在 react-admin 中實例化組件的方式,但現在我需要在 PostList 和 UserList 之間共享通知實例。 我想避免使用 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>
);
提前致謝。
在我看來,一切都得到了很好的實施: 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>
);
將自定義道具傳遞給<Resource>
組件對我來說不太有效,因此在嘗試了幾種不同的方法后,這是適合我要求的方法。
因此,有一個默認道具,您可以將其傳遞給名為options
的<Resource>
組件,它接受 object。通常,當您想要將label
拉入您的資源時,您會看到使用此道具。 想法是定制這個 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>
然后在您的資源中訪問它,例如 -
// 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>
);
};
如果這對您有用,請告訴我!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.