React-admin：多行通知消息

Question

我可以帮你翻译关于IT技术的内容。以下是需要翻译的内容：

如何使react-admin在snackbar上显示多行通知/错误消息？

具有以下dataProvider：

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

当加载列表组件时，会显示一条单行消息：

错误通知截图

- WiXSL

Answer 1

2022年更新：

自从react-admin的第4个版本以来，您可以通过使用useNotify钩子来传递多行消息，只需传递multiLine属性：https://marmelab.com/react-admin/useNotify.html#multiline。

更新结束。

好的，在文档的帮助下，我成功实现了我想要的功能。 定义一个自定义布局组件供App组件使用，并将其传递给自定义通知组件。

// ./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;

然后我将一个自定义的CSS类传递给通知组件。

// ./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;

错误通知截图多行

- WiXSL