Question

如何创建基于消费者和提供者的钩子？我问这个的原因是因为提供者和消费者是从另一个库中导出的，所以我不能提取更多的部分，我想要一种简洁的方法来向 useHook 添加一个值来填充想要的值.

// I have a provider somewhere above this part, and here is the consumer:
<MyConsumer>
  {props => <Values {...props} />}
</MyConsumer>

我想创建一个钩子来返回我在 Values 组件中获得的值。也许最好的方法是将 MyConsumer 包含在该钩子中，这样我就不需要“两行代码”来使用钩子了。

我正在想象这样的事情：

const useValues = (props) => {
  const [state, setState] = useState({});

  // do stuff

  return state;
}

如前所述，我不知道我应该如何处理 MyConsumer 部分。

感谢您的帮助

Answer 1

您可以通过使用您自己的上下文来包装提供者和消费者来实现这一点。

const MyStateCtx = createContext();
const useMyState = () => useContext(MyStateCtx);

// LibraryProvider and LibraryConsumer are the provider and consumer
// supplied by the library you're using.
const MyStateProvider = ({ children }) => {
  return (
    <LibraryProvider>
      <LibraryConsumer>
        {(props) => (
          <MyStateCtx.Provider value={props}>{children}</MyStateCtx.Provider>
        )}
      </LibraryConsumer>
    </LibraryProvider>
  );
};

const ConsumingComponent = () => {
  // You can consume state here with this hook ✨
  const myState = useMyState();

  return <div />;
};

export default function App() {
  return (
    <MyStateProvider>
      <div>
        <ConsumingComponent />
      </div>
    </MyStateProvider>
  );
}

Codesandbox link

与消费者（提供者/消费者）创建一个钩子

1 个答案: