Toastify Reactjs 添加一个 link
Toastify Reactjs adding a link
我如何在 reactjs toastify 中添加一个 link 像 'Click here to view' 和 link 它到其他一些 url?
目前我只能向其中添加静态文本。
我用过:
toast.info('some text')
我想显示另一行内容,上面写着单击此处使用 href 查看 属性
你可以用 React 组件来吐司。
const CustomToastWithLink = () => (
<div>
<Link to="/toasttest">This is a link</Link>
</div>
);
祝酒 toast.info(CustomToastWithLink);
用法示例
import React from "react";
import { BrowserRouter as Router, Link, Switch, Route } from "react-router-dom";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
const CustomToastWithLink = () => (
<div>
<Link to="/toasttest">This is a link</Link>
</div>
);
const Home = () => {
const letsToast = () => {
toast.info(CustomToastWithLink);
};
return (
<div>
<h3>Home</h3>
<button type="button" onClick={letsToast}>
Toast!
</button>
</div>
);
};
const ToastTest = () => (
<div>
<h3>Toast Test</h3>
Toast Test Satisfactory
</div>
);
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Router>
<Switch>
<Route path="/toasttest" component={ToastTest} />
<Route component={Home} />
</Switch>
<ToastContainer />
</Router>
</div>
);
}
我如何在 reactjs toastify 中添加一个 link 像 'Click here to view' 和 link 它到其他一些 url? 目前我只能向其中添加静态文本。 我用过:
toast.info('some text')
我想显示另一行内容,上面写着单击此处使用 href 查看 属性
你可以用 React 组件来吐司。
const CustomToastWithLink = () => (
<div>
<Link to="/toasttest">This is a link</Link>
</div>
);
祝酒 toast.info(CustomToastWithLink);
用法示例
import React from "react";
import { BrowserRouter as Router, Link, Switch, Route } from "react-router-dom";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
const CustomToastWithLink = () => (
<div>
<Link to="/toasttest">This is a link</Link>
</div>
);
const Home = () => {
const letsToast = () => {
toast.info(CustomToastWithLink);
};
return (
<div>
<h3>Home</h3>
<button type="button" onClick={letsToast}>
Toast!
</button>
</div>
);
};
const ToastTest = () => (
<div>
<h3>Toast Test</h3>
Toast Test Satisfactory
</div>
);
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Router>
<Switch>
<Route path="/toasttest" component={ToastTest} />
<Route component={Home} />
</Switch>
<ToastContainer />
</Router>
</div>
);
}