为啥我使用 `useRef` 创建的我的参考会产生此错误消息？

Posted 2023-02-25

【中文标题】为啥我使用 `useRef` 创建的我的参考会产生此错误消息？

【英文标题】：Why is the my reference, which I created using `useRef`, producing this error message?为什么我使用 `useRef` 创建的我的参考会产生此错误消息？

【发布时间】：2020-10-08 05:14:39

【问题描述】：

我为圆形 svg 上的动画创建了一个参考：

const circleRef = useRef(null);

在useEffect 中，我有这行代码会产生错误：

circleRef.current!.setNativeProps(
  strokeDashoffset,
);

这是产生的错误信息：

Property 'setNativeProps' does not exist on type 'never'.

关于为什么会发生这种情况的任何想法？对我来说似乎是打字错误，但我可能是错的

【参考方案1】：

TypeScript 不知道 circleRef 将持有的 ref 的类型，因为没有给出类型参数并且初始值为 null。那么推断的类型是never。

你可以这样做：

// Change `View` to whatever the type of component is.
const circleRef = useRef<View>(null);

我还建议使用 ? 运算符而不是 ! 运算符，以防止在运行此代码时碰巧未定义 ref 时发生崩溃：

circleRef.current?.setNativeProps( strokeDashoffset );

【讨论】：

即使将类型应用于 ref，这仍然会产生错误，如 const progressRef = React.useRef<React.ComponentClass<CircleProps, any>>() 和 CircleProps 来自 react-native-svg 在这种情况下。代码有效，但是 Typescript 编译器抱怨 setNativeProps 不是一个东西，当它肯定是我的应用程序正常运行时。就是无法摆脱错误。

我能做的唯一一件事就是“让 TS 编译器安静下来”，就是将我的 ref 设置为 any，这感觉不对，但不像红色波浪那样错 :) const progressRef = React.useRef<any>()。如果将其设置在视图上，则您的解决方案有效，但如果您想将其扩展到形状或某种自定义 SVG，不确定如何键入该圆圈，假设扩展视图，这样它会很高兴。