代码之家 › 专栏 › 技术社区 › Zuenie

在react to change boolean中使用钩子并获得回调

hook typescript reactjs

1

Zuenie · 技术社区 · 6 年前

我在试着用钩子做反应。钩子应该给我一个布尔值和一个回调。调用回调函数时,布尔值应该更改。当我试图检索值和回调时,我得到一个错误。

财产 isEnabled 类型上不存在 (boolean | (() => void))[] . 在线 const {isEnabled, toggleCallback} = useToggle() ;

function toggleCallback(toggleCallback: () => void) {
    toggleCallback();
}

export default function FakePage(props: any) {
    const {isEnabled, toggleCallback} = useToggle();
    return (
        <div>
            <ComponentOne isEnabled={isEnabled}/>
            <button onClick={() => testToggle(toggleCallback)}>Test</button>
        </div>
    );
}

// hook
export default function useToggle() {
    let isEnabled: boolean = true;
    const toggleCallback= useCallback(() => {
        isEnabled = !isEnabled;
    }, [isEnabled]);
    return [isEnabled, toggleCallback];
}

2 回复 | 直到 6 年前

1

4

Dennis Vash 6 年前

至于错误和类型,目前 您正在返回一个列表 boolean 类型的类型和功能 () => void ,你在哪里 要返回元组吗

// Return from custom hook
return [isEnabled, toggleCallback];

// use it like so, and not as object { isEnabled,setIsEnbaled }
const [isEnabled,setIsEnbaled] = useToggle();

return [isEnabled, toggleCallback] as const;

或指定返回类型:

type HookProps = (initialState: boolean) => [boolean, () => void];
const useToggle: HookProps = (initialState) => {...}

至于钩子实现,在JS中应该是这样的,因为变量没有连接到状态,使用 toggleCallback 在您的示例中,不会触发渲染。

function useToggle(initialValue = true) {
  const [isEnabled, toggle] = useReducer((p) => !p, true);
  return [isEnabled, toggle];
}

2

adel 6 年前

如何创建自定义挂钩:

export default function FakePage(props: any) {
    const {isEnabled, toggleCallback} = useToggle();
    return (
        <div>
            <ComponentOne isEnabled={isEnabled}/>
            <button onClick={toggleCallback}>Test</button>
        </div>
    );
}

// hook
export default function useToggle() {
    const [isEnabled,setIsEnabled] = useState(true)
    const toggleCallback= () => {
       setIsEnabled(current=>!current);
    };// no need to useCallback
    return {isEnabled, toggleCallback};
}

// and if you want to pass default value 

   export default function useToggle(default) {
        const [isEnabled,setIsEnabled] = useState(default)
        const toggleCallback= () => {
           setIsEnabled(current=>!current);
        };// no need to useCallback
        return {isEnabled, toggleCallback};
    }
// usage 
const {isEnabled, toggleCallback} = useToggle(false);