React函数组件中useToast()实例化语法与实现逻辑解析

一、代码实现意图解析 #

这段代码是Zendesk Garden通知组件库中Toast通知的典型使用方式，核心逻辑如下：

• useToast() Hook作用：这是组件库提供的自定义Hook，必须在ToastProvider包裹的组件内部使用，用于获取全局Toast通知的管理方法，其中addToast是触发弹出新Toast的核心函数。
• handleClick函数逻辑：用useCallback缓存的高阶函数，接收Toast的显示位置参数（比如top、bottom-end等），返回一个点击事件处理器。用户点击按钮时，调用addToast创建并显示Toast。
• Toast内容定义：addToast的第一个参数是一个渲染函数，接收close方法（用于关闭当前Toast），返回由Notification组件包裹的通知内容——包含标题、文本描述和绑定了close方法的关闭按钮。
• 配置项说明：addToast的第二个参数是配置对象，这里指定了Toast的显示位置，控制通知在页面的顶部/底部、左/中/右位置展示。

二、React类组件中的对应写法 #

类组件无法直接使用Hook，需要通过组件库提供的**高阶组件withToast或上下文消费者ToastConsumer**来获取addToast方法，以下是两种实现方式：

方式1：使用withToast高阶组件 #

import React from 'react';
import {
  Notification,
  Title,
  Close,
  ToastProvider,
  withToast
} from '@zendeskgarden/react-notifications';

class Toasts extends React.Component {
  // 定义点击事件处理器，逻辑与函数组件一致
  handleClick = (placement) => () => {
    const { addToast } = this.props;
    addToast(
      ({ close }) => (
        <Notification type="info" style={{ maxWidth: 450 }}>
          <Title>Info</Title>
          Turnip greens yarrow ricebean cauliflower sea lettuce kohlrabi amaranth water
          <Close aria-label="Close" onClick={close} />
        </Notification>
      ),
      { placement }
    );
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick('top')}>显示顶部通知</button>
        <button onClick={this.handleClick('bottom-end')}>显示右下角通知</button>
      </div>
    );
  }
}

// 用withToast包裹类组件，将addToast注入props
const ToastsWithToast = withToast(Toasts);

// 必须在ToastProvider下使用组件
const App = () => (
  <ToastProvider>
    <ToastsWithToast />
  </ToastProvider>
);

export default App;

方式2：使用ToastConsumer上下文消费者 #

import React from 'react';
import {
  Notification,
  Title,
  Close,
  ToastProvider,
  ToastConsumer
} from '@zendeskgarden/react-notifications';

class Toasts extends React.Component {
  handleClick = (addToast, placement) => () => {
    addToast(
      ({ close }) => (
        <Notification type="info" style={{ maxWidth: 450 }}>
          <Title>Info</Title>
          Turnip greens yarrow ricebean cauliflower sea lettuce kohlrabi amaranth water
          <Close aria-label="Close" onClick={close} />
        </Notification>
      ),
      { placement }
    );
  };

  render() {
    return (
      <ToastConsumer>
        {/* 通过消费者获取addToast方法 */}
        {({ addToast }) => (
          <div>
            <button onClick={this.handleClick(addToast, 'top')}>显示顶部通知</button>
            <button onClick={this.handleClick(addToast, 'bottom-end')}>显示右下角通知</button>
          </div>
        )}
      </ToastConsumer>
    );
  }
}

// 同样需要在ToastProvider下使用
const App = () => (
  <ToastProvider>
    <Toasts />
  </ToastProvider>
);

export default App;

内容的提问来源于stack exchange，提问作者Eric L