TypeScript useRef 使用问题
interface IModalReturn {destroy: () => void;update: (newConfig: ModalFuncProps) => void;
}let confirmModalRef = useRef<IModalReturn>(null);confirmModalRef.current = Modal.confirm({title: '确认删除吗？',content: '...',onOk() {}
});
在书写上面代码时，ts会给出错误提示 Cannot assign to 'current' because it is a read-only property. ，因为 current 为只读属性，故而不能赋值。
那么怎么将 current 属性转为 动态可变 的呢？
其实在 useRef 的类型定义中已经给出了答案
function useRef<T>(initialValue: T): MutableRefObject<T>;// convenience overload for refs given as a ref prop as they typically start with a null value/*** `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument* (`initialValue`). The returned object will persist for the full lifetime of the component.** Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable* value around similar to how you’d use instance fields in classes.** Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type* of the generic argument.** @version 16.8.0* @see https://reactjs.org/docs/hooks-reference.html#useref*/
其中注意下面这句话
Usage note: if you need the result of useRef to be directly mutable, include
| nullin the type of the generic argument.
如果需要直接修改useRef的结果，则在泛型参数的类型中包含 | null 就可以了
let confirmModalRef = useRef<IModalReturn | null>(null);
这样就变为动态可变的，不会再给出报错提示
useRef 在类型定义中具有多个重载声明，最初的代码走的便是下面的声明
function useRef<T>(initialValue: T|null): RefObject<T>;// convenience overload for potentially undefined initialValue / call with 0 arguments// has a default to stop it from defaulting to {} instead/*** `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument* (`initialValue`). The returned object will persist for the full lifetime of the component.** Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable* value around similar to how you’d use instance fields in classes.** @version 16.8.0* @see https://reactjs.org/docs/hooks-reference.html#useref*/