javascript - 类型 '(isOpen: boolean) => void' 不可分配给类型 'boolean' 。在reactjs中使用Modal时出错

Question

我正在我的应用程序中构建自定义模式组件。但是我在 Ts 类型检查时收到此错误。这是我的代码:

模态.tsx

import React, {useEffect, useRef} from 'react';
import {createPortal} from 'react-dom';

import {useOnClickOutside} from "../hooks";

interface Props {
    isOpen: boolean;
    toggle: (isOpen: boolean) => void;
    title: string;
    width?: any;
}

const modalRoot = document.getElementById('modal');

const Modal: React.FC<Props> = ({isOpen, toggle, title, width = 700, children}) => {
    const ref = useRef<HTMLDivElement>(null);
    const el = document.createElement('div');

    useOnClickOutside(ref, () => toggle(false));

    useEffect(() => {
        if (modalRoot) modalRoot.appendChild(el);


        return (() => {
            if (modalRoot) modalRoot.removeChild(el);
        })
    });

    return (
        isOpen ? createPortal(
            <React.Fragment>
                  {children}
            </React.Fragment>, el
        ) : null
    )
};

export default Modal;

useModal.tsx

const useModal = () => {
    const [isOpen, setIsShowing] = useState<boolean>(false);
    const toggle = (isOpen: boolean) => {
        setIsShowing(isOpen);
    };
    return [
        isOpen,
        toggle,
    ]
};

export default useModal;

使用

const [isOpen, toggle] = useModal();
return (
   <Modal title={'Enter link URL'}
               isOpen={isOpen} toggle={toggle}> //this line I get error
        <div>....</div>
   </Modal>
)

我不知道为什么。请帮助我

Answer 1

看起来 typescript 正在推断 useModal 函数的返回类型为 (boolean | ((isOpen: boolean) => void))[]。当尝试将其第一个元素分配给 isOpen 时，这会导致问题，因为它需要一个 bool 值，但您给它一个 boolean | ((isOpen: boolean) => void).

您实际想要的返回类型是[boolean, (isOpen: boolean) => void]，因此请尝试明确指出:

const useModal = () : [boolean, (isOpen: boolean) => void]  => {
    const isOpen = true;
    const toggle = (isOpen: boolean) => {
        //setIsShowing(isOpen);
    };
    return [
        isOpen,
        toggle,
    ]
};

export default useModal;