Question

我需要创建一个自定义钩子，该钩子应该包含将在我的页面中所有地方使用的所有处理程序。我的要求是；

应该可以从页面中的所有组件访问处理程序
处理程序应该能够使用其他钩子，例如useContext

因此，创建了一个 useHandlers 钩子sandbox

但是，由于 LogHandler不是函数

，因此无法从页面访问LogHandler

有什么主意吗？

Answer 1

为什么要获取LogHandler is not a function的问题是因为它是undefined，并且只有在调用HandlerComp时才会被初始化：

export const userHandlers = (): IUseHandlers => {
  // initialization skipped, so `LogHandler` is undefined
  let LogHandler: () => void;

  const HandlersComp: React.FunctionComponent<HandlersProps> = (
    props: HandlersProps
  ) => {
    // initialized here, but that's after `HandlersComp` gets caled
    LogHandler = () => {
      console.log("Hi from LogHandler");
    };

    return <></>;
  };
  return { HandlersComp, LogHandler };
}

我建议您像这样从HandlersComp中移出初始化步骤：

export const useHandlers = (): IUseHandlers => {
  const LogHandler: () => void = () => {
    console.log("Hi from LogHandler");
  };

  const HandlersComp: React.FunctionComponent<HandlersProps> = (
    props: HandlersProps
  ) => {
    LogHandler()
    return <></>;
  };

  return { HandlersComp, LogHandler };
};

一些注意事项：

HandlersComp看起来应该是一个单独的可重用组件，而不是hook
LogHandler看起来更像是一个实用函数，而不是hook
LogHandler不应使用PascalCase进行命名，因为应该为React组件“保留”该名称； HandlersComp很好，因为它看起来像是一个组件

使用其他钩子的Reactjs钩子

1 个答案: