我更喜欢使用一个名为HOC的高阶组件来 Package toast并为其提供必要的支持，这样，您就可以将toast放在一个中心位置，并使用HOC Package 需要显示toast的其他组件。
例如：

// withToast.js
import { useState } from "react";
import { ToastProvider } from "@chakra-ui/core";

const withToast = (WrappedComponent) => {
  return (props) => {
    const [toast, setToast] = useState({
      message: "",
      color: "",
      isOpen: false,
    });

    const showToast = (message, color) => {
      setToast({ message, color, isOpen: true });
    };

    const hideToast = () => {
      setToast({ message: "", color: "", isOpen: false });
    };

    return (
      <ToastProvider>
        <WrappedComponent
          {...props}
          showToast={showToast}
          hideToast={hideToast}
          toast={toast}
        />
      </ToastProvider>
    );
  };
};

export default withToast;

现在，您可以在由withToast Package 的每个组件中使用相同的toast：

import React from 'react';
import withToast from './withToast';

const App = (props) => {
  const { showToast, toast } = props;

  return (
    <div>
      <button onClick={() => showToast("Hello, World!", "green")}>
        Show Toast
      </button>
      <Toast message={toast.message} color={toast.color} isOpen={toast.isOpen} />
    </div>
  );
};

export default withToast(App);

您还可以在HOC中 Package 多个组件，并在 Package 组件内呈现的任何组件中使用showToast和hideToast函数，这样您就不必 * prop-drill * showToast和hideToast。