React Hooks：如何在一个组件上使用我的 useToggle 挂钩的多个实例？答案

【问题标题】：React Hooks: How can I use multiple instances of my useToggle hook on one component?React Hooks：如何在一个组件上使用我的 useToggle 挂钩的多个实例？
【发布时间】：2021-12-17 11:46:54
【问题描述】：

概述：

我创建了一个自定义的useToggle react 钩子，我想在一个组件中使用两个实例。 “隐私政策”的切换和“条款和条件”的切换。

问题

如何使用相同的useToggle 钩子为每个 useToggle 钩子获取不同的常量，如下所示。 [isToggled, toggle] 或 { isToggled, toggle } 的解决方案有效。如果可能的话，对象解构是首选。

const privacyPolicy = [isToggled, toggle] = useToggle();
const terms = [isToggled, toggle] = useToggle();


<button title="Privacy Policy" onClick={privacyPolicy.toggle} />
<button title="Terms & Conditions" onClick={terms.toggle} />

useToggle.ts

// Imports: Dependencies
import { useCallback, useState } from 'react';

// Imports: TypeScript Types
import { TReactHookUseToggle } from '@jefelewis/unison-types';

// React Hook: Use Toggle
export const useToggle = (initialState: boolean = false): TReactHookUseToggle => {
  // React Hooks: State
  const [isToggled, setIsToggled] = useState<boolean>(initialState);

  // Toggle
  const toggle: () => void = useCallback((): void => setIsToggled((prevState: boolean) => !prevState), []);

  return [isToggled, toggle];
};

【问题讨论】：

...只是根据它们切换的类型来调用不同的钩子函数名称？即const [isPrivacyPolicyToggled, togglePrivacyPolicy] = useToggle();，对每个切换重复；没有重叠

标签： javascript reactjs typescript react-native react-hooks

【解决方案1】：

要给它们不同的名称，请在解构数组时这样做：

const [privacyIsToggled, togglePrivacy] = useToggle();
const [termsIsToggled, toggleTerms] = useToggle();

<button title="Privacy Policy" onClick={togglePrivacy} />
<button title="Terms & Conditions" onClick={toggleTerms} />

【讨论】：