React组件调用问题：通过返回组件的函数展示自定义Snackbar

我明白你想实现的是一个可以通过函数调用直接弹出的Snackbar，当前的问题在于你导出的函数只是返回了React元素，但并没有把它挂载到DOM中，所以不会显示出来。这里有一个完整的解决方案，基于React Portal来实现动态挂载：

修改组件逻辑与导出函数 #

我们需要调整组件的状态管理，并用ReactDOM来动态创建DOM节点并挂载组件，关闭后再清理节点：

import React from 'react';
import ReactDOM from 'react-dom'; // 新增导入ReactDOM
import { Snackbar as MuiSnackbar, IconButton } from '@material-ui/core'
import { Close as CloseIcon, CheckCircle as CheckCircleIcon, Error as ErrorIcon, Info as InfoIcon, Warning as WarningIcon } from '@material-ui/icons'
import styled from 'styled-components';
import { green, amber, red, blue } from '@material-ui/core/colors';

const toastBgColor = {
  success: green[600],
  warning: amber[700],
  error: red[400],
  info: blue[200]
}

const toastIcons = {
  success: <CheckCircleIcon />,
  warning: <WarningIcon />,
  error: <ErrorIcon />,
  info: <InfoIcon />
}

const Wrapper = styled(MuiSnackbar)`
  background-color: ${props => toastBgColor[props.bg]};
`

// 重构组件，让外部控制显示状态
const SnackbarComponent = ({ bg, message, open, onClose }) => {
  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    onClose();
  };

  return (
    <Wrapper
      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
      open={open}
      autoHideDuration={5000}
      onClose={handleClose}
      ContentProps={{
        'aria-describedby': 'message-id',
      }}
      message={<span id="message-id">{toastIcons[bg]}{message}</span>}
      action={[
        <IconButton key="close" aria-label="close" color="inherit" onClick={handleClose} >
          <CloseIcon />
        </IconButton>,
      ]}
    />
  );
}

// 导出可直接调用的函数
export default function Snackbar(bg, message) {
  // 创建临时DOM节点，用于挂载Snackbar
  const container = document.createElement('div');
  document.body.appendChild(container);

  // 管理Snackbar的显示状态
  const [open, setOpen] = React.useState(true);

  const handleClose = () => {
    setOpen(false);
    // 等待关闭动画完成后，清理DOM节点和组件
    setTimeout(() => {
      ReactDOM.unmountComponentAtNode(container);
      document.body.removeChild(container);
    }, 300); // 可根据你的动画时长调整这个延迟
  };

  // 将组件挂载到临时节点上
  ReactDOM.render(
    <SnackbarComponent bg={bg} message={message} open={open} onClose={handleClose} />,
    container
  );
}

使用方式 #

在你的React应用中，导入这个组件后，直接调用函数即可弹出Snackbar：

import Snackbar from './path/to/your/Snackbar';

// 在某个事件处理函数中调用
const handleSubmit = () => {
  // 假设提交成功
  Snackbar("success", "数据提交成功！");
};

// 或者错误提示
const handleError = () => {
  Snackbar("error", "操作失败，请重试！");
};

关键说明 #

• 动态挂载逻辑：通过创建临时DOM节点并挂载，我们可以让Snackbar脱离当前组件的DOM层级，避免被父组件的样式或布局限制。
• 内存泄漏防护：在Snackbar关闭后，我们会卸载组件并移除临时DOM节点，确保不会留下无用的DOM元素。
• 生命周期控制：把显示状态从组件内部移到调用函数中，让函数调用完全掌控Snackbar的显示与销毁流程。

内容的提问来源于stack exchange，提问作者mehdi parastar