Toastify Reactjs добавление ссылки - PullRequest
Новая
       99

Toastify Reactjs добавление ссылки

0 голосов
/ 14 июля 2020

Как добавить ссылку типа «Щелкните здесь, чтобы просмотреть» в reactjs, чтобы настроить и связать ее с другим URL-адресом? В настоящее время я могу добавить к нему только статический c текст. Я использовал: 

toast.info('some text')

И я хочу отобразить еще одну строку, в которой говорится, что щелкните здесь, чтобы просмотреть со свойством href

1 Ответ

1 голос
/ 14 июля 2020

Вы можете создавать тосты с помощью компонентов React.

Toast API 

const CustomToastWithLink = () => (
  <div>
    <Link to="/toasttest">This is a link</Link>
  </div>
);

Toast by 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>
  );
}

Редактировать пользовательский тост Toastify с помощью компонента React

...