脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React编写全局Toast

基于React编写一个全局Toast的示例代码

 更新时间：2024年05月11日 08:28:11   作者：卸任  
前些日子在做项目的时候,需要封装一个Toast组件,我想起之前用过的库,只要在入口文件中引入就可以在全局中使用,还是很方便的,借这次机会也来实现一下,所以本文介绍了React中如何编写一个全局Toast,需要的朋友可以参考下

前言

前些日子在做项目的时候，需要封装一个Toast组件。我想起之前用过的库，只要在入口文件中引入就可以在全局中使用，还是很方便的，借这次机会也来实现一下。说起来也算是forwardRef、useImperativeHanle和useContext的实际使用。

  • 第一种，使用forwardRef和useImperativeHanle

一个是像react-toastify库一样使用，在入口处放置ToastContainer，然后在代码中任意地方使用toast("Wow so easy!")都有提示

  import React from 'react';

  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App(){
    const notify = () => toast("Wow so easy!");

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer />
      </div>
    );
  }
  • 第二种，使用useContext

在入口处放置ToastProvider，然后在代码中任意地方使用 const { show } = useToast()都有提示。忘记什么库了。

文中就用antd的message来模拟一下我们自己写的Toast组件。

正文

我们先来了解一下forwardRef、useImperativeHanle和useContext的基本使用。

forwardRef 和 useImperativeHandle 的基本使用

forwardRef 和 useImperativeHandle，它们通常一起使用，以便在父组件中暴露子组件的特定方法或属性。

forwardRef，它允许你将父组件的ref转发到子组件中的某个 DOM 节点或其他 React 组件。这样，父组件就可以访问子组件的引用，并直接操作它。

useImperativeHandle 是一个自定义 Hook，它允许你自定义通过 forwardRef 暴露给父组件的 ref 值。你可以指定哪些方法或属性被暴露，而不是直接暴露整个 DOM 节点或组件实例。

下面是一个简单的例子

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));

  return <input ref={inputRef} {...props} />;
});

const ParentComponent = () => {
  const childRef = useRef(null);

  const handleClick = () => {
    childRef.current.focus();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Focus Child Input</button>
    </div>
  );
};

export default ParentComponent;

使用forwardRef和useImperativeHanle封装全局Toast

封装组件

import React, { createRef, forwardRef, useImperativeHandle } from 'react';
import { Button, message } from 'antd';

const Toast = forwardRef((props, ref) => {
  const [messageApi, contextHolder] = message.useMessage();

  useImperativeHandle(ref, () => ({
    show: (msg: string) => {
      messageApi.info(msg);
    }
  }));

  return <>
    {contextHolder}
  </>
})

const ToastRef = createRef<{ show: (msg: string) => {} }>();

export const ToastContain = () => {
  return <Toast ref={ToastRef} />
}

export const showToast = (msg: string) => {
  if (ToastRef.current) {
    ToastRef.current.show(msg)
  }
};

在入口中引入

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import router from '@/router/index'
import reportWebVitals from './reportWebVitals';
import { RouterProvider } from 'react-router-dom';
import ErrorBoundary from './ErrorBoundary';
import { ToastContain } from './components/Toast';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
      <ToastContain />
      <RouterProvider router={router} fallbackElement={<div>准备中</div>} />
  </React.StrictMode>
);
reportWebVitals();

然后就可以在全局中使用 showToast方法了

import React from 'react';
import { showToast } from '../../../components/Toast';

export default function Index() {
  return <>
    <div
      onClick={() => {
        showToast('sadasds')
      }}
    >
       提示弹窗
    </div>
  </>
}

useContext的基本使用

useContext用于访问组件树中某个层级上定义的 Context。Context 提供了一种在组件之间共享值的方式，而不必通过组件树的每个层级显式传递 props。

  • 创建 Context

首先，你需要创建一个 Context 对象。这可以通过调用 React.createContext 来完成。你还可以为默认值提供一个参数，如果 Context 的 Provider 没有在组件树中找到，将使用这个默认值。

import React from 'react';

const MyContext = React.createContext('defaultValue');
  • 提供 Context

你需要在组件树中的某个地方提供这个 Context。这通常在组件的顶层完成，通过使用 MyContext.Provider组件，并传递一个 value prop

import React from 'react';
import MyComponent from './MyComponent';
import { MyContext } from './MyContext';

function App() {
  return (
    <MyContext.Provider value="Hello from Context">
      <MyComponent />
    </MyContext.Provider>
  );
}

export default App;
  • 使用 useContext

在需要访问 Context 的组件中，你可以使用 useContext Hook 来获取 Context 的当前值

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

function MyComponent() {
  const contextValue = useContext(MyContext);

  return <p>Context value: {contextValue}</p>;
}

export default MyComponent;

使用useContext来封装全局Toast

封装组件

import React, { createContext, useCallback, useContext, useState } from 'react';
import { Button, message } from 'antd';

const ToastContext = createContext<any>(null);

export const ToastProvider = ({ children }: any) => {
  const [messageApi, contextHolder] = message.useMessage();

  const show = useCallback((msg: string) => {
    messageApi.info(msg);
  }, [messageApi]);

  return (
    <ToastContext.Provider value={{ show }}>
      {children}
      {contextHolder}
    </ToastContext.Provider>
  );
};

export const useToast = () => {
  const context = useContext(ToastContext);
  return context;
};

在入口处使用

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import router from '@/router/index'
import reportWebVitals from './reportWebVitals';
import { RouterProvider } from 'react-router-dom';
import ErrorBoundary from './ErrorBoundary';
import { ToastProvider } from './components/ToastOne';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <ToastProvider>
      <RouterProvider router={router} fallbackElement={<div>准备中</div>} />
    </ToastProvider>
  </React.StrictMode>
);

然后就可以通过useToast在全局中使用了

import React from 'react';
import { useToast } from '../../../components/ToastOne';

export default function Index() {
  const { show } = useToast()

  return <>
    <div
      onClick={() => {
        show('guiyu')
      }}
    >
      点击提示
    </div>
  </>
}

结尾

以上就是基于React编写一个全局Toast的示例代码的详细内容，更多关于React编写全局Toast的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • React Hooks使用startTransition与useTransition教程示例

    React Hooks使用startTransition与useTransition教程示例

    这篇文章主要为大家介绍了React Hooks使用startTransition与useTransition教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • React中immutable的UI组件渲染性能详解

    React中immutable的UI组件渲染性能详解

    这篇文章主要为大家介绍了React中immutable的UI组件渲染性能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • React框架快速实现简易的Markdown编辑器

    React框架快速实现简易的Markdown编辑器

    这篇文章主要为大家介绍了使用React框架实现简易的Markdown编辑器，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-04-04
  • 优雅的在React项目中使用Redux的方法

    优雅的在React项目中使用Redux的方法

    这篇文章主要介绍了优雅的在React项目中使用Redux的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 使用React-Window实现虚拟滚动效果的示例代码

    使用React-Window实现虚拟滚动效果的示例代码

    React-Window 是一个为 React 应用程序中高效渲染大数据集而设计的库,它基于窗口化或虚拟化的原则运行,本文将使用React-Window实现虚拟滚动效果,感兴趣的可以了解下
    2024-01-01
  • TypeScript在React项目中的使用实践总结

    TypeScript在React项目中的使用实践总结

    这篇文章主要介绍了TypeScript在React项目中的使用总结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04
  • 使用React hook实现remember me功能

    使用React hook实现remember me功能

    相信大家在使用 React 写页面的时候都遇到过完成 Remember me 的需求吧！本文就将这个需求封装在一个 React hook 中以供后续的使用,觉得有用的同学可以收藏起来以备不时之需,感兴趣的小伙伴跟着小编一起来看看吧
    2024-04-04
  • ahooks正式发布React Hooks工具库

    ahooks正式发布React Hooks工具库

    这篇文章主要为大家介绍了ahooks正式发布值得拥有的React Hooks工具库使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • Redux模块化拆分reducer函数流程介绍

    Redux模块化拆分reducer函数流程介绍

    Reducer是个纯函数，即只要传入相同的参数，每次都应返回相同的结果。不要把和处理数据无关的代码放在Reducer里，让Reducer保持纯净，只是单纯地执行计算，这篇文章主要介绍了Redux拆分reducer函数流程
    2022-09-09
  • React 实现拖拽功能的示例代码

    React 实现拖拽功能的示例代码

    这篇文章主要介绍了React 实现拖拽功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论