Reactjs 我怎样才能从钩子里做出反应？

我找到了useToast和useToastContainer，但是没有文档，我不知道如何使用这些钩子。有人能提供一些关于这些钩子的信息吗？

The

toasts

inherit

ToastContainer的

道具。在toast上定义的道具将取代toast容器的道具

有两种方法可以在应用程序中使用

祝酒

：

1。在组件内部定义

toastcainer

你可以使用它们中的任何一个。我更喜欢2nd方法，因为您只需要定义

toast.configure（）

，这是一种非常干净的添加方法

您可以根据需要添加配置，如下所示：

编辑

---

如果你想使用toast钩子，那么你必须用ToastProvider包装你的应用程序，以便在你的应用程序中的其他地方访问它的上下文

import { ToastProvider, useToasts } from 'react-toast-notifications'

const FormWithToasts = () => {
  const { addToast } = useToasts()

  const onSubmit = async value => {
    const { error } = await dataPersistenceLayer(value)

    if (error) {
      addToast(error.message, { appearance: 'error' })
    } else {
      addToast('Saved Successfully', { appearance: 'success' })
    }
  }

  return <form onSubmit={onSubmit}>...</form>
}

const App = () => (
  <ToastProvider>
    <FormWithToasts />
  </ToastProvider>
)

从“react toast notifications”导入{ToastProvider，useToasts}
const FormWithToasts=（）=>{
const{addToast}=useToasts（）
const onSubmit=异步值=>{
const{error}=等待dataPersistenceLayer（值）
如果（错误）{
addToast（error.message，{外观：'error'}）
}否则{
addToast（'保存成功'，{外观：'成功'}）
}
}
返回。。。
}
常量应用=（）=>(
)

您是否遇到过这样的问题：您无法定义ToastContainer并使用自定义挂钩中的toast（），这就是问题所在。如果你知道如何使用它，我会非常高兴。你必须用ToastProvider包装你的应用程序，才能在你的应用程序中的其他地方访问它的上下文。

import { toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
  
   // Call it once in your app. At the root of your app is the best place
  toast.configure()
  
  const App = () => {
    notify = () => toast("Wow so easy !");

    return (
        <button onClick={notify}>Notify !</button>
    );
  }

toast.configure({
  autoClose: 8000,
  draggable: false,
  //etc you get the idea
});

import { ToastProvider, useToasts } from 'react-toast-notifications'

const FormWithToasts = () => {
  const { addToast } = useToasts()

  const onSubmit = async value => {
    const { error } = await dataPersistenceLayer(value)

    if (error) {
      addToast(error.message, { appearance: 'error' })
    } else {
      addToast('Saved Successfully', { appearance: 'success' })
    }
  }

  return <form onSubmit={onSubmit}>...</form>
}

const App = () => (
  <ToastProvider>
    <FormWithToasts />
  </ToastProvider>
)