材料用户界面 - 如何将自定义小吃栏的过渡更改为幻灯片

Question

我想将小吃栏的过渡更改为幻灯片而不是增长(默认行为(，但我不能这样做，因为我将小吃栏与警报一起使用。

这是来自Material-UI的原始演示： https://codesandbox.io/s/e1dks

如果我导入这个：

import Slide from '@material-ui/core/Slide';
import { TransitionProps } from '@material-ui/core/transitions';

创建此函数：

function SlideTransition(props: TransitionProps) {
return <Slide {...props} direction="up" />;
}

并在小吃栏标签上插入此属性：

TransitionComponent={SlideTransition}

我有错误：Cannot read property 'getBoundingClientRect' of null

看看当我尝试同时使用带有警报和幻灯片的小吃栏时的错误 https://codesandbox.io/s/material-demo-ysub3

在 https://material-ui.com/api/slide/有一个警告可以提供帮助，但我不明白这一点：A single child content element. ⚠️ Needs to be able to hold a ref.

我正在使用带有打字稿的 React 。

Answer 1

查看您的示例，控制台中存在一个错误：

Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Slide)`. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://material-ui.com/r/caveat-with-refs-guide

在">

更多信息"链接之后，它建议您需要将"普通函数组件"包装在React.forwardRef中。

这会导致将Alert函数从：

function Alert(props: AlertProps) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}

自

const Alert = React.forwardRef((props, ref) => <MuiAlert elevation={6} variant="filled" {...props} ref={ref} />);

进行此更改后，代码将按预期工作 - 警报从底部滑入，而不是弹出到视图中。