如何在HOC组件中使用react钩子?

Question

我有一个问题，使HOC组件与钩子在里面。

我正试图找到一个正确的解决方案，不打破rules-of-hooks。

如果我将该组件的名称改为小写开头:withNetworkDetector而不是大写，我不会得到错误，但我打破了规则吗?

这个代码是安全的吗?

export const WithNetworkDetector = (Component: FC<{}>) => (props: any) => {
const [isDisconnected, setIsDisconnected] = useState(false);
const handleConnectionChange = useCallback(() => {
...
setIsDisconnected(true);
}, []);

return (
<div>
{isDisconnected && (
<Toast type="warning" text={TOAST_ERRORS.LOST_INTERNET_CONNECTION} />
)}
<Component />
</div>
);
};

Answer 1

Hooks可以在React功能组件中使用。将函数归类为react函数的标准之一是以大写字母开头的名称，然后我们才能将其用作react组件。因此，它将打破规则。