如何使用自定义挂钩在组件之间共享状态数据？

我有以下自定义挂钩useFlash:

import { useState } from 'react';


export default function useFlash() {
  const [messages, setMessages] = useState([]);

  const showFlash = (message: string) => {
    setMessages([...messages, message]);
  };

  const clearMessage = (index: number) => {
    setMessages(messages.filter((_m, i) => index !== i));
  };

  return {
    messages,
    showFlash,
    clearMessage
  };
}

然后我将这个 HOC 提供给其他两个组件：

import React from 'react';
import useFlash from '../effects/useFlash';

const withFlash = (WrappedComponent: React.Component) => {
  const WithFlash = () => {
    const { messages, showFlash, clearMessage } = useFlash();

    return (
      <WrappedComponent
        messages={messages}
        showFlash={showFlash}
        clearFlashMessage={clearMessage}
      />
    );
  };

  return WithFlash;
};

export default withFlash;

它工作得很好，除了 HOC 的每次使用都会获得自己的状态数据。我需要国家是全球性的。我知道我可以使用消费者/提供者的上下文，但我认为这种方式会更简单一些。事实证明这不是真的，有没有办法让它全球化？

您需要使用 Context，但这并没有那么糟糕..

创建你的上下文..

import React, { useState } from 'react';

export const FlashContext = React.createContext();

export const FlashProvider = ({ children }) => {
  const [messages, setMessages] = useState([]);
  return (
    <FlashContext.Provider value={{ messages, setMessages }}>
      {children}
    </FlashContext.Provider>
  );
};

将您的组件包装在树中较高位置的提供程序中。

import React from "react";
import { FlashProvider } from "./flash-context";

const App = () => <FlashProvider><TheRest /></FlashProvider>;

export default App;

然后在您的自定义挂钩中使用上下文..

import React, { useContext } from "react";
import { FlashContext } from "./flash-context";

export default function useFlash() {
  const { messages, setMessages } = useContext(FlashContext);

  const showFlash = (message) => {
    setMessages([...messages, message]);
  };

  const clearMessage = (index) => {
    setMessages(messages.filter((_m, i) => index !== i));
  };

  return {
    messages,
    showFlash,
    clearMessage
  };
}