react-toastify组件Toast无法渲染问题求助

我一眼就发现问题所在啦——你的代码里缺少了ToastContainer组件，这是react-toastify用来承载和渲染所有提示框的核心容器，没有它的话，调用toast后根本没地方显示提示内容！

步骤1：补充必要的导入 #

除了导入toast，你还需要导入ToastContainer以及react-toastify的样式文件，否则就算能显示，提示框也会没有正确的样式：

import React from "react";
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css'; // 必须引入样式文件

步骤2：在组件中添加ToastContainer #

在MyView组件的render方法里，把ToastContainer放到DOM结构中，通常放在根容器的末尾即可：

class MyView extends React.Component<{}, {}> {
  constructor() {
    super();
    this.state = { };
  }

  componentDidMount() {
    toast("Hello", { autoClose: false });
  }

  notify = () => toast("Hello", { autoClose: false });

  render() {
    return (
      <div>
        <button onClick={this.notify}>Notify</button>
        {/* 添加ToastContainer，这是渲染toast的必要容器 */}
        <ToastContainer />
      </div>
    )
  }
}

额外检查：确认package.json依赖版本 #

确保你的package.json里已经正确安装了react-toastify，dependencies部分应该包含类似这样的条目：

"dependencies": {
  // 其他依赖项...
  "react-toastify": "^9.1.3",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

如果还没安装，记得先执行npm install react-toastify或者yarn add react-toastify完成安装。

这样修改后，不管是componentDidMount里触发的toast，还是点击按钮调用的notify方法，都能正常显示提示框啦！

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