reactjs - 类型 'MutableRefObject' 不可分配给类型 'string | ((实例 : HTMLInputElement | null) => void)

Question

我在 TypeScript 中使用 useRef 有问题。
我想输入它，但出现错误，如下所示:

我的容器组件是:

    const HeaderContainer: React.FC = () => {
    const addressElement = useRef<HTMLInputElement | undefined>();
    
        const handleCopy = useCallback(() => {
            if (addressElement.current !== undefined) {
                addressElement.current.select();
                document.execCommand("copy");
            }
        }, [addressElement]);
    return <HeaderUI
        addressElement={addressElement}
        handleCopy={handleCopy} />
}

UI组件是:

interface IProps {
    handleCopy: (event: React.MouseEvent) => void,
    addressElement: React.MutableRefObject<HTMLInputElement | undefined>,
}
const HeaderUI: React.FC<IProps> = ({
                                        handleCopy, addressElement
                                    }) => {
return <div className={classes.Header}>
        <div className={classes["Header-Section"]}>
            <span className={classes["Section-Title"]}>Персональный адрес кошелька:</span>
            {address && <input
              type="text"
              className={classes["Section-Value"]}
              ref={addressElement}
              value={address}
              readOnly/>}
        </div>
        <CopyLinkButtonContainer onClick={handleCopy}/>
    </div>;
}

你能帮忙解决这个问题吗？
谢谢。

Answer 1

错误的最后一行是您的解决方案:您的 useRef期望类型HTMLInputElement | null但你正在设置类型HTMLInputElement | undefined
只需将您的类型更改为 null而不是 undefined :

const addressElement = useRef<HTMLInputElement | null>();

{... addressElement: React.MutableRefObject<HTMLInputElement | null>, ...}

并将您的支票更改为: if (addressElement.current !== null) {