Javascript Typescript-forward和useref

我有两个部分：

const ComponentOne = () => {
   const a = React.useRef<ComponentTwo>(null);
                // ^^^^^^^^^^ throws error - ComponentTwo refers to a value but used as type here
   const fn = () => {
      a.current.open(); // how to type it so typescript knows than open() is a function

      a.current.awdokawd(); // typescript should throw error here
   };

   return (
      <ComponentTwo ref={a} />
   );
}

const ComponentTwo = React.forwardRef((props, ref: React.RefObject<What here?>) => {
                                                            // ^^^^ what to type here?
   React.useImperativeHandle(ref, () => ({
      open: () => {
         console.log('hey');
      },
   }));

   return (
      ...
   );
});

const ComponentOne=（）=>{
const a=React.useRef（null）；
//^^^^^^^^^^^^^抛出错误-ComponentTwo引用了一个值，但在此处用作类型
常数fn=（）=>{
a、 current.open（）；//如何键入它以便typescript知道open（）是一个函数
a、 current.awdokawd（）；//typescript应在此处抛出错误
};
返回(
);
}
const ComponentTwo=React.forwardRef（（props，ref:React.reobject）=>{
//^^^^^在这里键入什么？
React.useImperialiveHandle（参考文献，（）=>({
打开：（）=>{
console.log（'hey'）；
},
}));
返回(
...
);
});

如您所见，我不确定使用

useRef

输入什么，因此typescript可以正确识别组件及其方法。也不确定使用

forwardRef

键入什么

---

谢谢

您只需为ref声明一个新类型：

接口组件TwoRef{
open（）：void；
}
常量组件一=（）=>{
const a=React.useRef（null）；
常数fn=（）=>{
a、 current.open（）；
a、 current.awdokawd（）；//typescript应在此处抛出错误
};
返回(
);
}
const ComponentTwo=React.forwardRef（（props，ref:React.reobject）=>{
React.useImperialiveHandle（参考文献，（）=>({
打开：（）=>{
console.log（'hey'）；
},
}));
返回(
...
);
});

您只需为ref声明一个新类型：

接口组件TwoRef{
open（）：void；
}
常量组件一=（）=>{
const a=React.useRef（null）；
常数fn=（）=>{
a、 current.open（）；
a、 current.awdokawd（）；//typescript应在此处抛出错误
};
返回(
);
}
const ComponentTwo=React.forwardRef（（props，ref:React.reobject）=>{
React.useImperialiveHandle（参考文献，（）=>({
打开：（）=>{
console.log（'hey'）；
},
}));
返回(
...
);
});

是否将引用向下传递给DOM组件？如果是这样，我认为两个实例中的类型都是该元素的类型。但鉴于您正在调用ref对象上的方法，我不相信ref转发确实是您在这里想要的。@lindapaste我想从父对象调用children方法。函数组件（ComponentTwo是）没有方法。它使用道具并返回一些JSX/HTML代码。所以这没有意义。更好的设计是让ComponentOne拥有方法和状态，并将其传递给ComponentTwo。您可以使用

UseImperialiveHandle

注入该方法，但该钩子的描述基本上是“不要使用此”：

useImperialiveHandle自定义在使用ref时向父组件公开的实例值。与往常一样，在大多数情况下应避免使用ref的命令式代码。

@lindapaste这不是真的，

useImperialiveHandle

hook旨在模拟使用ref时类方法的行为。这是一种完全有效的模式，请参见：您是否将ref传递给DOM组件？如果是这样，我认为两个实例中的类型都是该元素的类型。但鉴于您正在调用ref对象上的方法，我不相信ref转发确实是您在这里想要的。@lindapaste我想从父对象调用children方法。函数组件（ComponentTwo是）没有方法。它使用道具并返回一些JSX/HTML代码。所以这没有意义。更好的设计是让ComponentOne拥有方法和状态，并将其传递给ComponentTwo。您可以使用

UseImperialiveHandle

注入该方法，但该钩子的描述基本上是“不要使用此”：

useImperialiveHandle自定义在使用ref时向父组件公开的实例值。与往常一样，在大多数情况下应避免使用ref的命令式代码。

@lindapaste这不是真的，

useImperialiveHandle

hook旨在模仿使用ref时类方法的行为。这是一种完全有效的模式，请参见：没有其他方法可以做到这一点吗？这看起来很简单，但lil也有点天真。。。而且是硬编码的。我的意思是，除非你想使用类组件，否则没有。这正是TS的用途，有时你必须定义东西。我想说的是名称

ComponentTwoRef

让它感觉像是硬编码的。如果您将名称更改为

Openable

，其中它是一个使用void

open（）

方法描述任何对象的接口，则感觉更自然

useRef

意味着“我需要一个可以打开的东西的引用。”是的，这是另一个选项，从来没有这样想过！没有别的办法吗？这看起来很简单，但lil也有点天真。。。而且是硬编码的。我的意思是，除非你想使用类组件，否则没有。这正是TS的用途，有时你必须定义东西。我想说的是名称

ComponentTwoRef

让它感觉像是硬编码的。如果您将名称更改为

Openable

，其中它是一个使用void

open（）

方法描述任何对象的接口，则感觉更自然

useRef

意味着“我需要一个可以打开的东西的引用。”是的，这是另一个选项，从来没有这样想过！