类型"undefined"不可分配给类型"RefObject<HTMLDivElement | undefined>

Question

我有一个tsx文件，其中的代码如下：

interface CommandProps {
otherStuff: string;
commandContainerRef: React.RefObject<HTMLDivElement | undefined>;
}
const getComponentProps = (): CommandProps => {
return {
otherStuff: 'stuff',
commandContainerRef: undefined,
};
};
.....

它给了我一个错误：

类型"undefined"不可分配给类型"RefObject<HTMLDivElement|未定义>'。

然后，我厌倦了命令ContainerRef:React.useRef(null(，上面的错误消失了，但它给了我下面的esint错误：

错误-React Hook"React.useRef"；在函数中调用"getComponentProps"既不是React功能组件，也不是自定义React Hook功能。React组件名称必须以大写字母。React Hook名称必须以单词"开头；使用"；。(反作用挂钩/挂钩规则(

我想知道如何解决这个问题。提前感谢！

Answer 1

React.RefObject<T>是一个具有名为current的只读属性的接口，该属性属于给定类型T(或null(，在本例中为CommandProps或undefined(或null(。

因此，如果您希望从getComponentProps返回的commandContainerRef是React.RefObject到undefined，这应该有效：

const getComponentProps = (): CommandProps => {
return {
otherStuff: 'stuff',
commandContainerRef: { current: undefined },
};
};

或者，根据您的确切需求，您也可以将commandContainerRef更改为：

commandContainerRef: React.RefObject<HTMLDivElement> | undefined;

那么问题中的getComponentProps实现应该会起作用。