React-admin:多行通知消息

时间:2019-08-29 13:35:05

标签: notifications message react-admin

我如何让react-admin在小吃栏上显示多行通知/错误消息?

具有以下dataProvider:

export default (type, resource, params) => {
    throw new Error(`
     Message line 1.
     Message line 2.
     Message line 3.
    `);
};

在加载列表组件时显示单行消息:

error notification screenshot

1 个答案:

答案 0 :(得分:1)

好的,在docs的帮助下,我设法做到了自己想要的。 定义要由App组件使用的自定义布局组件,并将其传递给自定义Notification组件。

// ./MyLayout.js
import React from 'react';
import { Layout } from 'react-admin';
import MyNotification from "../MyNotification";


const CustomLayout = props => (
    <Layout {...props} notification={MyNotification} />
);

export default CustomLayout;

然后我将自定义类作为Notification组件传递。

// ./MyNotification.js
import React from 'react';
import {withStyles} from '@material-ui/core/styles';
import {Notification} from 'react-admin';

// Allow multi-line messages to be displayed
const cssMsg = {
    snackbarContent: {
        whiteSpace: 'pre-wrap'
    }
};

const MyNotification = withStyles(cssMsg)(({classes, ...props}) => (
    <Notification {...props} className={classes.snackbarContent}/>
));

export default MyNotification;

error notification screenshot multi-line