类型 'MutableRefObject<HTMLInputElement | undefined>' 不可分配给类型 'string | ((实例：HTMLInputElement | null) => void)

Question

我在 TypeScript 中遇到了 useRef 的问题。
\n我想输入它，但收到错误，如下所示：
\n\n我的容器组件是：

\n

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

\n

UI 组件是：

\n

interface IProps {\n    handleCopy: (event: React.MouseEvent) => void,\n    addressElement: React.MutableRefObject<HTMLInputElement | undefined>,\n}\nconst HeaderUI: React.FC<IProps> = ({\n                                        handleCopy, addressElement\n                                    }) => {\nreturn <div className={classes.Header}>\n        <div className={classes["Header-Section"]}>\n            <span className={classes["Section-Title"]}>\xd0\x9f\xd0\xb5\xd1\x80\xd1\x81\xd0\xbe\xd0\xbd\xd0\xb0\xd0\xbb\xd1\x8c\xd0\xbd\xd1\x8b\xd0\xb9 \xd0\xb0\xd0\xb4\xd1\x80\xd0\xb5\xd1\x81 \xd0\xba\xd0\xbe\xd1\x88\xd0\xb5\xd0\xbb\xd1\x8c\xd0\xba\xd0\xb0:</span>\n            {address && <input\n              type="text"\n              className={classes["Section-Value"]}\n              ref={addressElement}\n              value={address}\n              readOnly/>}\n        </div>\n        <CopyLinkButtonContainer onClick={handleCopy}/>\n    </div>;\n}\n

\n

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

\n

谢谢。

\n

Answer 1

只需像这样在括号内传递 null 即可。

const addressElement = useRef<HTMLInputElement>(null);

Answer 2

错误的最后一行是您的解决方案：您useRef期望的类型

HTMLInputElement | null

但你正在设置类型

HTMLInputElement | undefined

只需将您的类型更改null为undefined：

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

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

并将您的支票更改为：

if (addressElement.current !== null) {

Answer 3

addressElement 的类型设置应该为 null 而不是 undefined。

\n

而且，命名和传递 ref 的更好设计是......只需使用 ref 即可。

\n

<HeaderUI\n        ref={addressElement}\n        handleCopy={handleCopy} />\n

\n

然后...

\n

const HeaderUI: React.FC<IProps> = ({\n                                        handleCopy, addressElement, ref\n                                    }) => {\nreturn <div className={classes.Header}>\n        <div className={classes["Header-Section"]}>\n            <span className={classes["Section-Title"]}>\xd0\x9f\xd0\xb5\xd1\x80\xd1\x81\xd0\xbe\xd0\xbd\xd0\xb0\xd0\xbb\xd1\x8c\xd0\xbd\xd1\x8b\xd0\xb9 \xd0\xb0\xd0\xb4\xd1\x80\xd0\xb5\xd1\x81 \xd0\xba\xd0\xbe\xd1\x88\xd0\xb5\xd0\xbb\xd1\x8c\xd0\xba\xd0\xb0:</span>\n            {address && <input\n              type="text"\n              className={classes["Section-Value"]}\n              ref={ref}\n              value={address}\n              readOnly/>}\n        </div>\n        <CopyLinkButtonContainer onClick={handleCopy}/>\n    </div>;\n}\n

\n