问题标签 [react-toastify]

我想将我自己的自定义样式添加到 react-toastify 消息弹出窗口中，具体取决于它是成功还是错误。到目前为止，我尝试了以下方法：

toastify.js

这是一个函数，我在其中根据类型参数定义 toastify 显示的消息样式类型。然后我这样调用这个函数：

导出默认函数 ({params}) { ... async function deleteTodo (id) { try { const res = await axios.delete( http://localhost:8000/api/delete-task/${id});

}

这就是我得到的：

我仍然得到那个白色的背景。我想要的只是删除默认样式并添加我自己的成功和错误。

在更新一些用户信息后，我正在使用它（在 Redirect from react-router-dom 下面）从我的编辑组件移动到配置文件组件。

一旦我的配置文件组件安装，我就会这样做

但问题是，即使this.props.location.state.message未定义，正如它在 React Dev 工具中显示的那样，每次我刷新页面时都会弹出“配置文件已更新！”消息。

我必须做这部分

让它以某种方式工作。仍然没有运气。请帮忙。

默认情况下，我们会收到 react-toastify ，如下图所示。但是现在项目需要一个块或 div 中的所有消息，一个十字按钮和通知计数在顶部，一个计时器和一个滚动条来查看所有消息。

我尝试过使用 redux，但现在需要删除 redux。请查看是否有人可以通过仅使用反应来帮助解决此问题。或者如果 react-toastify 提供此功能。

有什么方法可以react-toastify与 Reactstrap 的Toast组件或 Bootstrap 4toast类一起使用吗？这是我当前的配置：

需要明确的是，我正在使用以下库：

• 反应烤面包：https ://github.com/fkhadra/react-toastify
• Reactstrap：https ://reactstrap.github.io

我真的很希望能够将此组件用作 Toast：

• https://reactstrap.github.io/components/toasts

这是在一个文件夹中定义的代码。我正在尝试在其中添加材质图标。但它显示错误

使用 JSX 时，React' 必须在范围内

像这样访问代码...

I'm trying to get react-toastify to work in an app I'm writing while following an online course. I'm supposed to install a specific version but I always prefer using the very latest one but when I do, I'm getting a bunch of errors.

I've gone to the npm home page for React-Toastify and they provide very good documentation on how to use it and I believe I've followed the instructions from both the course and react-toastify correctly but I'm still getting an error.

I've defined react-toastify as the top of my App.js

and I'm simply calling a test toast as follows:

and in my render method I have the <ToastContainer />:

When I click on my delete button I get an error (well I'm actually getting a bunch of them but this is the main one):

Actually, I've just noticed that my <ToastContainer /> was commented out in my render method and the second I uncomment it, the same error occurs immediately as my page loads.

Am I missing something or is this a bug with react-notify and the version of React I'm using i.e. 16.4.1?

我正在使用 react-toastify 弹出错误消息。为什么我会收到此错误？

TypeError: Object(...) is not a function useToastContainer E:/Courses/programing/Code with Mosh/Front End/Mastering React/08 - Calling Backend Services (01h42m)/Section 8- Calling Backend Services/start/http-应用程序/node_modules/react-toastify/dist/react-toastify.esm.js:866

删除ToastContainer组件后，一切正常。我应该怎么做才能摆脱这个错误，为什么我会得到它？

我需要在类组件中实现此代码。这是为了在我的类组件中使用 react-toastify 的上传进度

我怎样才能做到这一点？

我正在构建一个包含多个组件的 React 应用程序，并且我正在使用其中至少一半的组件，React-notify并且它在几乎所有组件中都能正常工作，除了一个组件。在这一次，当我触发吐司时，我得到了四个吐司，一个接一个，但我相信它们不是不同的吐司，因为它们具有相同的 ID。

我找到了这个帖子https://github.com/fkhadra/react-toastify/issues/182，这里的用户遇到了和我一样的问题，唯一的例外是我没有设置autoclose，他甚至提供了一个 gif 显示问题：

https://imgur.com/a/8NMMaRa

根据这个线程的解决方案是删除所有<ToastContainer />组件并将其呈现在应用程序根目录中，在我的情况下是App.js. 我这样做了，但是不再显示祝酒词，但我不知道我是否做得对。

除此之外，我还尝试设置自定义 ID，但它没有改变任何东西。

我正在使用React-router-dom，也许这会影响某些事情，我找不到正确的答案，也找不到任何其他来源的文档。

这是我的简化版本App.js：

这是正在生成错误的组件示例：

正常工作的组件具有相同的 sintaxe。

任何帮助将不胜感激。

正如标题所说，我有两个具有完全相同格式的按钮，但是一个在单击时刷新页面而不是提交表单。我只需要它来触发敬酒。

这是工作按钮：

这是不工作的按钮：

唯一的区别是第一个包含在链接标签中以提交搜索，而另一个将提交电子邮件以订阅新闻通讯，但它现在应该只是触发祝酒词。

帮助？

另外，我已经尝试过 event.preventDefault （没有用），并且两者的表单格式也完全相同。