Toastify未正确呈现
Toastify是一个用于在网页上显示通知消息的JavaScript库。它可以帮助开发人员在网页中以简单、美观的方式显示各种通知，如成功消息、错误消息、警告消息等。
Toastify的主要特点包括：
- 简单易用：Toastify提供了简洁的API，使开发人员可以轻松地在网页中添加通知消息。
- 自定义样式：开发人员可以根据自己的需求自定义通知消息的样式，包括背景颜色、文字颜色、位置等。
- 动画效果：Toastify支持多种动画效果，可以让通知消息以吸引人的方式呈现在网页上。
- 事件回调：Toastify提供了多个事件回调函数，开发人员可以在通知消息显示、隐藏等事件发生时执行自定义的操作。
Toastify适用于各种网页应用场景，包括但不限于：
- 表单提交：在表单提交成功或失败时，可以使用Toastify显示相应的通知消息，提醒用户操作结果。
- 用户登录/注册：在用户登录或注册成功后，可以使用Toastify显示欢迎消息或成功提示。
- 数据更新：在数据更新或保存成功时，可以使用Toastify显示相应的通知消息，提醒用户操作结果。
- 错误处理：在发生错误或异常时，可以使用Toastify显示错误消息，帮助开发人员快速定位问题。
腾讯云提供了一款类似的产品，称为"云开发 Toast"。它是腾讯云云开发平台的一部分，可以帮助开发人员在小程序、Web应用等场景中快速集成通知消息功能。具体产品介绍和使用方法可以参考腾讯云的官方文档：云开发 Toast。
相关·内容
我正试图让react-toastify在我正在编写的一个应用程序中工作，而我正在学习一门在线课程。我应该安装一个特定的版本，但我总是更喜欢使用最新版本，但当我这么做时，我会得到一大堆错误。
我已经访问了npm的主页，他们提供了关于如何使用它的非常好的文档，我相信我已经正确地遵循了来自课程和react-toastify的说明，但我仍然收到了一个错误。
我已经将react-toastify定义为App.js的顶部
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/di
浏览 2提问于2020-06-14得票数 3
回答已采纳
只需按一下按钮，通知就可以很轻松地工作。但是，我尝试在道具通过时激活它(true/false)。 基本上，用户点击此选项卡，如果他们没有登录，它将弹出通知，告诉他们登录。 然而，如果不是一个按钮，我就不能让它工作。道具通过很好，我可以console.log它。条件返回值...一些东西，但它就像一堆奇怪的字母，每次刷新它都会改变。并且不会像通知那样弹出。它只是屏幕中央的模糊字母(因为表单上方放置了{notify} )。 import React, {Component} from 'react';
import { ToastContainer, toast }
浏览 14提问于2020-12-06得票数 0
回答已采纳
对于弹出消息，我使用的是react-toastify，所以当我的页面被重定向到profile.js后，我添加了这个在挂载上运行的useEffect，以显示通知。
useEffect(() => {
notify();
}, []);
const notify = () =>
toast.success("Logged in Successfully.", {
position: toast.POSITION.TOP_CENTER,
autoClose: 3000,
});
但问题是，每当我访问或回去分析弹出消息
浏览 10提问于2022-04-06得票数 1
2回答
我得到了
无名TypeError: Object(.)在useToastContainer (reacti-toastify.esm.js?146c:296)的ToastContainer (reacti-toastify.esm.js?146 c:954)的mountIndeterminateComponent (reacti-dom.Development.js?61bb:14563)的beginWork (dom dom.Development.js?61bb:15063)的performUnitOfWork (Reacti-dom.Development.js?61bb:17820)
浏览 1提问于2021-01-29得票数 0
回答已采纳
1回答
我使用库在我的应用程序中显示吐司。默认情况下，toast具有width: 320px。由于这有时不足以容纳一个单词，且该单词的一部分不显示，因此我尝试使用以下css来调整toast的大小：
div.toast-resize {
width: auto;
max-width: 500px;
}
这在Chrome中有效，但不幸的是在IE 11中不起作用。在IE中，toast总是有min-width。我认为原因是toastify使用了flexbox。不幸的是，和的变通方法都不起作用。我创建了以下示例。.Toastify*-Rules不能更改，div.toast-resize是我自己的规则。
浏览 0提问于2018-06-29得票数 2
我为名为Lazy的React做了一个解决方案，我希望有人检查这是否真的是惰性导入。
Toast.js
import { ToastContainer } from "react-toastify";
export default ToastContainer;
App.js
const ToastContainer = React.lazy(() => import("../main/shared/toast"));
return(
<Suspense fallback={null}>
<ToastConta
浏览 2提问于2021-01-14得票数 0
回答已采纳
3回答
我刚在我的REACT应用程序中添加了REACT Toastify。我的Apps.js中有以下代码
import { ToastContainer, Slide } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
function App() {
return (
<>
<Router basename={process.env.PUBLIC_URL}>
<div className="con
浏览 8提问于2019-12-04得票数 10
回答已采纳
我试图用几种方法解决这个问题，但没有成功。这个路由器非常适合于呈现，但是当我用元素替换时，App.jsx会抛出一个错误。
如果我删除一个() =>在带有主页的路由中，那么组件就会呈现出来，但是我不能在带有签名/注册的路由中这样做。
我不知道错误可能在哪里。
import React, { useState, useEffect } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Homepage from "
浏览 5提问于2022-07-03得票数 1
回答已采纳
我购买了，并试图了解这个代码中的“{ getLayout (<Component {...pageProps} />)}”在初始加载时转到哪个页面。我猜它是一个全局变量，但我无法用定义找到它。我正试图在下工作，但我有一些问题。如果有人在这方面有一个很好的教程，我会很乐意接受的。
import type { AppProps } from 'next/app';
import { appWithTranslation } from 'next-i18next';
import { SessionProvider } from 'next-aut
浏览 5提问于2022-09-08得票数 0
1回答
当我使用下面的代码时，我得到了错误
Error: The default export is not a React Component in page: "/"
页/index.tsx
import React, { useState, useRef } from "react";
import type { NextPage } from "next";
import WithToast from "hoc/WithToast/WithToast";
const Home: NextPage = () => {
r
浏览 8提问于2022-05-01得票数 1
当我在react- am toastify npm模块和服务器端渲染中使用错误时，我得到了错误。toastify/dist/ReactToastify.css模块分析失败:意外令牌(1:0)您可能需要适当的加载器来处理此文件类型。|
Error:
.Toastify__toast-container { | z-index: 9999; | position: fixed;
ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle t
浏览 36提问于2019-07-10得票数 1
6回答
当尝试使用时出现错误
、、、
当我试图导入tosify以作出反应时：
使用以下方法：
从“react toastify”导入{ ToastContainer，土司}；从“react toastify/dist/ReactToastify.css”导入“react/dist/ReactToastify.css”；
我得到以下错误：
编译失败。
./node_modules/react-toastify/dist/react-toastify.esm.mjs无法从非EcmaScript模块导入指定的导出“cloneElement”(只有默认的导出可用)
不知道什么是解决方案，并已花费了大量的时间试图找到解决方案，但我也不能，如
浏览 19提问于2022-06-20得票数 10
回答已采纳
1回答
我在用react-toastify。
_app.tsx：
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
...
return (
<AppStateProvider>
<MainProvider>
<HeaderProvider>
<Component {...pageProps} />
<T
浏览 4提问于2021-10-07得票数 0
1回答
我正在从CDN导入Vue.js & Vue-Toastify，以便在SPA上使用。我只需要几个反应组件，因此我从CDN导入。 Vue Toastify 我是Vue的新手，正在尝试使用CDN //来使用Vue-Toastify，而不是从npm安装和导入。我有正确的CDN链接，但是我如何导入它以便在.vue文件中使用。因为我没有创建Vue.js项目，所以我没有main.js文件，也不能使用导入方法。 这有可能吗？如果我console.log(窗口)，我可以在模块列表中看到VueToastify，但我无法从我的.vue文件中使用或访问它。 当前通过cdn安装的代码示例： <scrip
浏览 30提问于2020-07-24得票数 1
回答已采纳
1回答
在我的react.js应用程序中，我使用以下语句尝试使用外部模块(React Toastify)： import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css'; 不幸的是，这会抛出以下错误： Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file
浏览 19提问于2019-03-31得票数 1
回答已采纳
toastify/dist/ReactToastify.css`，我无法管理Toast以显示在右下角。我使用的是确切的代码作为文档。但它不起作用 import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
toast.configure();
function myComponent () {
...
const submit = () => {
toast.succes
浏览 62提问于2021-08-02得票数 0
回答已采纳
我可以毫无问题地import { ToastContainer } from 'react-toastify，但是当我尝试import 'react-toastify/dist/ReactToastify.css';时，我会得到一个错误：
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loade
浏览 11提问于2021-12-14得票数 0
我正在尝试在我的项目中添加吐司通知。由于某种原因，在添加
toast.configure();
代码不工作，我有错误：
react_toastify__WEBPACK_IMPORTED_MODULE_3__.toast.configure is not a function
这是我的代码：
import {toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
toast.configure();
function App() {
r
浏览 14提问于2022-05-21得票数 2
1回答
嗨伙计们我有麻烦了。当我输入“仪表板”(这是一条私有路由)时，它会首先将我重定向到“登录”，然后重定向到仪表板。真和假在一起玩。我如何修正它不重定向我登录，然后到仪表板。
视频示例：
代码：
import React, {
useState,
useEffect
} from "react"
import { toast } from "react-toastify"
import {
BrowserRouter as Router,
Routes,
Route,
Navigate
} from "react-router-d
浏览 4提问于2022-02-01得票数 1
回答已采纳
我也有同样的问题，我使用了创建-反应-应用程序，我的反应请帮助我这里是完整的消息：./node_modules/react-toastify/dist/react-toastify.esm.mjs不能从非EcmaScript模块导入命名的导出'cloneElement‘(只有默认的导出可用)
浏览 7提问于2022-08-22得票数 1
尝试更改Toast容器的背景颜色，下面的代码假设要这样做。我不知道我错过了什么，但它不起作用… 这是我尝试过的： .toastError {
margin-top: 15rem;// this works
&.Toastify__toast--error {
background: #bd362f !important;// this is is not...
}
} react组件： import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify
浏览 16提问于2021-04-21得票数 0
回答已采纳
6回答
反应-显示多个吐司
、、、
我正在构建一个带有几个组件的React应用程序，在其中至少一半的组件中，我使用的是React-notify，除了一个组件之外，几乎所有组件都能正常工作。在这个过程中，当我触发祝酒词时，我得到了四个祝酒词，一个在另一个之后，但我相信它们不是不同的祝酒词，因为它们的ID是相同的。
我找到了这个线程，这里的用户有与我的线程相同的问题，唯一的例外是我没有设置autoclose，他甚至提供了一个gif来显示这个问题：
根据这个线程，解决方案将是删除组件的所有<ToastContainer />并在应用程序根中呈现它，在我的示例中是App.js。我做到了，但是祝酒词已经没有了，我不知道我做得
浏览 10提问于2020-06-25得票数 2
回答已采纳
1回答
我坚持在我的vuejs应用程序中加载SignalR，我已经包含了CDN，但无法加载库
输出:挂载signalR的undefined
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" conte
浏览 1提问于2021-02-27得票数 0
我设置了一个用jekyll模板定制的本地存储库，然后配置了一个与github帐户同步的git存储库。
一切都很完美:运行
jekyll serve --watch
在我的电脑上，我可以看到该网站的预览。
在将所有更改推到github之后，我可以看到我的网站正在运行。
除了之外，一切都是正确的，除了，在Markdown中编辑的post页面是正确的。
使用jekyll serve --watch时，我可以看到页面的正确预览(带有标题、图像.)当推到github时，真正的网站似乎没有正确地解释Markdown语法。
结果是，我看到Markdown只是简单的行文本，没有格式化(没有图像，没有标题.)
浏览 1提问于2015-11-24得票数 0
回答已采纳
1回答
我有一个react应用程序，我使用react-toastify提示某些消息。然而，每当我在祝酒词上点击x键时，它们就不会关闭。但是，当我配置了autoClose: delay时，它们就会关闭，如下所示。我也可以把它们拖走，然后往那边靠近。
下面是我为祝酒而创建的一个小实用程序：
import { toast } from 'react-toastify';
export const notifyInfo = (msg, delay = 3000) => {
toast.info(msg, {
position: 'top-center
浏览 0提问于2021-05-20得票数 0
我想要做的是在单击Notification.vue文件中的按钮并显示Notification时，向文件“Notification”发送一个值。
helloword.vue
<template>
<button @click="toast">Toast it!</button>
</template>
<script>
export default {
name: "helloword",
methods: {
toast(
浏览 9提问于2022-07-04得票数 0
回答已采纳
2回答
我是设计模式的新手，我偶然发现了解释观察者模式的网站
import { ToastContainer, toast } from "react-toastify";
function logger(data) {
console.log(`${Date.now()} ${data}`);
}
function toastify(data) {
toast(data);
}
observable.subscribe(logger);
observable.subscribe(toastify);
export default function App() {
浏览 3提问于2022-10-24得票数 0
回答已采纳
1回答
用引导带4进行反应
、、、
有任何方法可以将react-toastify与Reactstrap的Toast组件或Bootstrap 4 toast类一起使用吗？下面是我当前的配置：
import { toast } from 'react-toastify'
toast.configure({
toastClassName: 'toast', // Bootstrap class
bodyClassName: 'toast-body', // Another Bootstrap class
});
为了明确起见，我正在使用以下库：
Reactstrap： Reac
浏览 0提问于2020-04-04得票数 1
当我尝试使用react时，它在下面显示了这个错误.
在尝试以下命令之前，我已经安装了以下命令：
npm install --save react-toastify
在Google控制台中显示错误：
ERROR in ./src/Pages/Login/Login/Login.js 12:0-55 Module not found: Error: Can't resolve 'react-toastify' in 'C:\projects\toffpark-footwear-inventory-client\src\Pages\Login\Login'
浏览 5提问于2022-05-08得票数 1
1回答
我在我的React应用程序中使用react-toastify作为通知。在其配置中，我设置了默认的autoClose设置。是否有一种仅针对特定通知重写此设置的方法？请在下面找到我的当前代码。
我在索引页面中设置了react-toastify默认配置：
import { ToastContainer } from "react-toastify";
<ToastContainer
closeButton={false}
autoClose={6000}
/>
例如，在其他页面上，我的代码会被吹掉。在这里，我只想为特定消息为autoClose设置一个自定
浏览 13提问于2022-03-24得票数 0
回答已采纳
1回答
是否有一种将库动态导入我的next.js项目的方法？或者在初始页面加载之后加载它？我希望动态导入下面的toastify库，因为在有人单击页面上的元素之前，它并不是真正需要的。
尝试了以下方法，但没有运气：
import dynamic from 'next/dynamic'
const { ToastContainer, toast } = dynamic(import('react-toastify'), { ssr: false });
浏览 4提问于2020-12-31得票数 2
我在应用程序中创建了文件auth.js文件和ProtectedRoute.js。在API中使用JWT创建了一个令牌，并在登录到我的应用程序时存储在本地存储中。在导入Authprovider和ProtectedRoute的ProtectedRoute中，它显示了路由.please中的错误，检查我的代码，并告诉我哪里出错了
auth.js
import { useContext, createContext } from "react";
const AuthContext = createContext(null)
export const AuthProvide
浏览 7提问于2022-03-09得票数 0
回答已采纳
2回答
我试图添加自定义风格的反应，首先，我有进口这些。
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
而不是叫反应吐司：
const handleToast = () => {
toast("sent mail")
}
在这里，我在土司容器中添加css：
<div>
<ToastContainer toastStyle=
浏览 25提问于2022-05-07得票数 0
我想把祝酒词放在bottom-right上，但要从底部抵消。
举个例子。
目前这是我的ToastContainer定义
ReactDOM.render(
<Router history={hist}>
<Switch>
<Route path="/admin" component={Admin} />
<Redirect from="/" to="/admin" />
</Switch>
<ToastContainer
浏览 4提问于2021-05-22得票数 0
我已经创建了一个登录页面来练习我的技能。问题是，在触发handleSubmit函数后，我无法呈现toast通知。流程是，当“用户”提交他或她的登录信息时，将弹出toast通知，显示登录成功。 例如，在我的代码中 import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
//once the user is verified, toast notification is launched.
const handleSubmit = asyn
浏览 14提问于2020-12-09得票数 0
2回答
我试图使用React中的Redux和类型记录分派一个函数，但是我得到了这个错误：
Argument of type '(dispatch: Dispatch) => void' is not assignable to parameter of type 'AnyAction'
职能1：
const postProducts = (origin: string) => {
return (dispatch: Dispatch) => {
dispatch(initProducts(origin))
}
}
职能2：
ex
浏览 15提问于2022-07-07得票数 1
2回答
我在C#中使用Selenium C#，并试图编写一个断言，如果第一个字符串中的某些文本与第二个字符串中的部分文本相匹配，该断言将比较两个字符串并断言True。
string ActualValue = driver.FindElement(By.CssSelector("div.Toastify__toast.Toastify__toast--error")).Text;
Assert.IsTrue(ActualValue.Contains("There was an error validating your API key. Please contact Supp
浏览 2提问于2019-10-24得票数 1
回答已采纳
3回答
我试图将从我的服务器( express )发送到axios的错误消息发送到axios，并且错误消息显示在toastify组件中，但是错误消息没有在这里显示，这是带有toastify的登录axios函数，我如何从redux在我的页面中显示toastify消息？
这是我的代码：
// redux controller
const login = async (username, password) => {
await axios.post("/login",{username,password,},
{ withCredentials: true });
浏览 16提问于2022-04-26得票数 0
下面是我的汇总配置 // rollup.config.js
const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
module.exports = {
rollup(config, _options) {
config.plugins.push(
postcss({
plugins: [
autoprefixer(),
],
ext
浏览 108提问于2021-07-29得票数 0
添加JS：
我希望将toastify js与我的laravel项目集成在一起，以实现toast通知。
浏览 1提问于2018-08-16得票数 0
我正在使用react-toastify，但我无法获得一个简单的吐司来呈现...
import React from "react";
import { toast } from 'react-toastify';
class MyView extends React.Component<{}, {}> {
constructor() {
super();
this.state = {
};
}
componentDidMount() {
toast(
浏览 0提问于2018-03-20得票数 20
当我在React SSR应用程序的react.js组件中导入react-toastify的CSS文件时，它在终端中抛出了以下错误。
.Toastify__toast-container {^
SyntaxError:意外的标记。
在我的App.js中，我像这样导入它
导入"react-toastify/dist/ReactToastify.css“
我正在分享我的webpack配置
var path = require("path");
var webpack = require("webpack");
var nodeExternals = requi
浏览 2提问于2019-11-19得票数 1
我在做Reactjs天气项目。在提交后，我将在子组件(Form.js)的方法中获取值，并且需要在父组件(App.js)中获得该值。如何得到这个价值？
App.js文件(父组件)
getWeather = async (e) => {
e.preventDefault();
}
Form.js文件(子组件)
import React, { Component } from 'react'
import Background from '../video/rain_drop2.jpg';
import { ToastContainer, toast
浏览 0提问于2019-10-28得票数 1
回答已采纳
我正在使用react-toastify显示通知。每当收到状态代码为401的响应时，我都希望显示toast的错误。但是，不会触发任何通知。这是可能的(使用axios intereceptors)吗？ 这是我的代码： import {Toast as toast, ToastContainer} from "react-toastify";
...
axios.interceptors.response.use(function (response) {
return response.data;
}, function (error) {
if (error.resp
浏览 40提问于2019-03-14得票数 3
相信我，我一直在梳理Stackoverflow过去的问题，看看是否有任何解决方案可以解决我的问题，但没有运气。
在这里，我试图将两个文件导入一个react应用程序(css和scss)中，.This文件驻留在node_modules目录中。
如果我用@参数导入它，它将显示错误未知令牌
@import '~react-toastify/dist/ReactToastify.css';
@import '~react-toastify/dist/main.scss';
如果按照下面的代码在没有@参数的情况下导入它，它将显示未找到的错误模块。无法解析
import &#
浏览 0提问于2018-11-03得票数 0
回答已采纳
1回答
我使用useSelector钩子来检索还原器的值，但是它会在我的应用程序上造成很多不必要的呈现。
我在组件上使用的属性并不重要，因为它们都从还原器获得相同的state对象，每次一个属性发生变化时，所有使用useSelector的组件都会被呈现。
这是减速机：
const initialState = {
productsDataState: [], // => this is populated by multiple objects
searchProducts: [],
isSearchOn: false,
inputValue: '',
浏览 3提问于2022-08-16得票数 0
回答已采纳
在下面的代码中，我如何才能让这个toast通知显示身份验证通过的时间？我已经尝试了这里的注释，但不是有效的代码。
import { toast } from 'react-toastify';
class Home extends React.Component {
//https://www.npmjs.com/package/react-toastify#demo
//notify = () => toast("Wow so easy !");
render() {
return (
浏览 0提问于2020-03-03得票数 0
不知道为什么会出现这个错误，这里是我的index.js和App.js (默认导出)。我在app.js中使用了导出默认值。 index.js： import "./index.css";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
<App />; App.js import React, { Component } from "re
浏览 137提问于2020-01-23得票数 4
回答已采纳
1回答
我想在我的绘图中旋转一个文本。示例代码将如下所示：
plt.text(0.5, 0.0, 'ABC', fontsize=40, rotation=90)
plt.text(0.5, 0.5, 'DFG', fontsize=40, rotation=90)
但上述文本没有正确对齐。我附上了一张图来说明这一点。
浏览 17提问于2020-05-19得票数 2
回答已采纳
1回答
我的应用程序中有一个mods页面，只有版主和管理员才能访问。如果一个人试图通过直接输入URL来访问它，我有一些逻辑可以重定向他们。
import { useHistory } from "react-router";
import createNotification from "../../../addNotification";
import getRole from "../../../authentication";
const ModHome = () => {
const history = useHistory();
浏览 3提问于2021-11-24得票数 0
回答已采纳
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
腾讯云开发者
