React useRef与TypeScript和功能组件
React useRef与TypeScript和功能组件
提问于 2020-03-05 22:21:56
我试图使用useRef从父组件调用子组件方法。
将来，SayHi方法将更新子组件中的钩子状态。不幸的是，我有我无法处理的bug。
线：ref.current.SayHi();
属性'SayHi‘在'ForwardRefExoticComponent<{ name: string；}& RefAttributes<{ SayHi：() => void；}>>’上不存在。
线：<Child name="Adam" ref={ref}/>
类型'RefObject void；}>>>‘不可分配给类型’(例如：{ SayHi：() => void；}SayHi空) => void) \ RefObject<{ SayHi：() => void；}> assignable未定义‘。键入'RefObject >>>；}>>>‘不能分配到键入'RefObject<{ SayHi：() => void；}>’。属性'SayHi‘在类型'ForwardRefExoticComponent<{ name: string；}& RefAttributes<{ SayHi：() => SayHi；}’中缺少，但在类型'{ SayHi：() => void；}‘中需要。
完整的test.tsx文件：
import React, { useRef, forwardRef, useImperativeHandle, Ref } from 'react'
const Parent = () => {
const ref = useRef<typeof Child>(null);
const onButtonClick = () => {
if (ref.current) {
ref.current.SayHi();
}
};
return (
<div>
<Child name="Adam" ref={ref}/>
<button onClick={onButtonClick}>Log console</button>
</div>
);
}
const Child = forwardRef((props: {name: string}, ref: Ref<{SayHi: () => void}>)=> {
const {name} = props;
useImperativeHandle(ref, () => ({ SayHi }));
function SayHi() { console.log("Hello " + name); }
return <div>{name}</div>;
});在这个问题上，我深深地寻求帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-05 22:39:48
您需要在其他地方提取ref类型：
interface RefObject {
SayHi: () => void
}那就在两个地方都参考一下
const Child = forwardRef((props: {name: string}, ref: Ref<RefObject>)=> {
const {name} = props;
useImperativeHandle(ref, () => ({ SayHi }));
function SayHi() { console.log("Hello " + name); }
return <div>{name}</div>;
});const Parent = () => {
const ref = useRef<RefObject>(null);
const onButtonClick = () => {
if (ref.current) {
ref.current.SayHi();
}
};
return (
<div>
<Child name="Adam" ref={ref}/>
<button onClick={onButtonClick}>Log console</button>
</div>
);
}Stack Overflow用户
发布于 2020-03-05 22:58:35
只需将ref的声明替换为下面的const ref = useRef<{ SayHi: () => void }>(null);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60554808
复制相关文章
相似问题
腾讯云开发者
