我需要在类组件中实现这段代码。这是为了在我的类组件中使用 react-toastify 的上传进度
function Example(){
const toastId = React.useRef(null);
function handleUpload(){
axios.request({
method: "post",
url: "/foobar",
data: myData,
onUploadProgress: p => {
const progress = p.loaded / p.total;
if(toastId.current === null){
toastId = toast('Upload in Progress', {
progress: progress
});
} else {
toast.update(toastId.current, {
progress: progress
})
}
}
}).then(data => {
toast.done(toastId.current);
})
}
return (
<div>
<button onClick={handleUpload}>Upload something</button>
</div>
)
}
我怎样才能做到这一点？
我正在尝试react-toastify在学习在线课程时使用我正在编写的应用程序。我应该安装一个特定的版本，但我总是更喜欢使用最新的版本，但是当我这样做时，我收到了一堆错误。
我去npm了React-Toastify 的主页，他们提供了关于如何使用它的非常好的文档，我相信我已经按照课程和react-toastify正确，但我仍然得到一个错误。
我已经定义react-toastify为我的 App.js 的顶部
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
我只是按如下方式调用测试吐司：
handleDelete = (post) => {
toast("deleted");
// toast.error("deleted");
}
在我的渲染方法中，我有<ToastContainer />：
render() {
return (
<React.Fragment>
<ToastContainer />
<button className="btn btn-error" onClick={this.handleDelete}>
Delete
</button>
当我点击我的删除按钮时，我收到一个错误（好吧，我实际上得到了一堆，但这是主要的）：
TypeError: Object(...) is not a function
useToastContainer
..myapp/node_modules/react-toastify/dist/react-toastify.esm.js:866
863 | }
864 |
865 | function useToastContainer(props) {
> 866 | var _useReducer = useReducer(function (x) { …如何在 reactjs toastify 中添加“单击此处查看”之类的链接并将其链接到其他网址？目前我只能向其中添加静态文本。我用了：
toast.info('some text')
我想显示另一行说点击这里查看带有 href 属性
我正在构建一个包含多个组件的 React 应用程序，其中至少有一半我正在使用，React-notify并且除了一个之外，几乎所有组件都可以正常工作。在这一次中，当我触发 toast 时，我得到了四个 toast，一个在另一个之后，但我相信它们不是不同的 toast，因为它们具有相同的 ID。
我发现这个线程https://github.com/fkhadra/react-toastify/issues/182，这里用户遇到了和我一样的问题，唯一的例外是我没有设置autoclose，他甚至提供了一个 gif 显示问题：
根据该线程的解决方案是删除所有<ToastContainer />组件并将其呈现在应用程序根目录中，在我的情况下是App.js. 我这样做了，但是不再显示祝酒词，但我不知道我是否做得对。
除此之外，我还尝试设置自定义 ID，但没有任何改变。
我正在使用React-router-dom，也许这会影响某些事情，我无法找到正确的答案，也无法在任何其他来源的文档中找到。
这是我的简化版本App.js：
import Layout from './containers/Layout/Layout';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
class App extends Component {
render() {
return (
<BrowserRouter>
<Layout>
<Switch>
<Route path="/clientes" exact component={ClientesControls} />
<Route path="/adm" exact component={AdmControls} />
<Route path="/" component={OrcConfig} />
<ToastContainer …我有一个带有某种形式的屏幕，在提交时，我使用 axios 将请求发送到后端。成功收到响应后，我用 react-toastify 敬酒。非常直接的屏幕。但是，当我尝试使用 jest 和 react 测试库通过集成测试来测试这种行为时，我似乎无法让 Toast 出现在 DOM 上。
我有一个像这样的实用程序渲染器来渲染我正在使用 toast 容器测试的组件：
import {render} from "@testing-library/react";
import React from "react";
import {ToastContainer} from "react-toastify";
export const renderWithToastify = (component) => (
render(
<div>
{component}
<ToastContainer/>
</div>
)
);
在测试本身中，我用 react-testing-library 填写表单，按下提交按钮，然后等待 toast 出现。我正在使用模拟服务工作者来模拟响应。我确认响应返回 OK，但由于某种原因，吐司拒绝出现。我目前的测试如下：
expect(await screen.findByRole("alert")).toBeInTheDocument();
我正在寻找具有角色警报的元素。但这似乎不起作用。另外，我尝试做这样的事情：
...
beforeAll(() => {
jest.useFakeTimers();
}
...
it("test", () => {
...
act(() =>
jest.runAllTimers();
)
expect(await screen.findByRole("alert")).toBeInTheDocument();
}
我对 JS 有点陌生，问题可能是由于 axios 和 react-toastify 的异步性质，但我不知道如何测试这种行为。我尝试了很多东西，包括模拟定时器并运行它们，模拟定时器并推进它们，而不是模拟它们并等待等等。我什至试图模拟 toast …
我是 stackoverflow 的新手，所以如果“如何正确提问”有错误，我深表歉意？我在我的reactJS应用程序中遇到了react-toastify的问题。我有一个用 spring-boot 创建的飞行管理系统 API，它工作得很好（用邮递员测试）。我正在触发端点 ->“乘客/注册”来发布乘客/客户详细信息。一切正常，但当我通过 toast.success 单击创建帐户时，我获得了成功的巨大勾选。它显示了带有成功消息的大勾选。图像
应用程序.js
import React from 'react'
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
import Header from './components/Header'
import Showcase from './components/Showcase'
import Destinations from './components/Destinations'
import Footer from './components/Footer'
import Login from './components/Login.js'
import SignUp from './components/SignUp'
import Error from './components/Error'
import { Button, Container,Row, Col} from 'reactstrap';
import {ToastContainer, toast} from "react-toastify";
function App() {
return (
<div>
<ToastContainer position="top-left"/>
<BrowserRouter>
<Header />
<Routes>
<Route path="/" element={<><Showcase /><Destinations …我想将我自己的自定义样式添加到 react-toastify 消息弹出窗口，具体取决于它是成功还是错误。到目前为止，我尝试了以下方法：
toastify.js
import { toast, Slide } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { css } from "glamor";
toast.configure({
position: toast.POSITION.BOTTOM_RIGHT,
autoClose: 3000,
transition: Slide,
pauseOnFocusLoss: false,
className: css({
backgroundColor: 'red',
}),
bodyClassName: css({
backgroundColor: 'blue',
height: '100%',
width: '100%',
})
});
export default function (message, type, styles = {}) {
switch (type) {
case type === 'success':
toast.success(message);
break;
case type === 'error':
toast.error(message);
break;
case type === 'info':
toast.info(message);
break;
case type === 'warn':
toast.warn(message);
break;
default: …