react useRef ts 编译报错 不能将类型“MutableRefObject<HTMLDivElement | undefined>”分配给类型“LegacyRef<HTMLDivEleme
最新推荐文章于 2023-05-20 00:49:20 发布
最新推荐文章于 2023-05-20 00:49:20 发布
不能将类型“MutableRefObject<HTMLDivElement | undefined>”分配给类型“LegacyRef | undefined”。
1.没赋初值
2. useRef里面没写对类型
正确的列子
const canvasRef = useRef<HTMLCanvasElement|null>(null)
return <canvas ref={canvasRef }>
因为ref获取时不一定能获取到dom,所以类型为,不能直接赋值给HTMLElement类型,可以使用as来断言,不过要加value,写成refname.value as HTMLElement。
不能将类型“MutableRefObject<HTMLDivElement | undefined>”分配给类型“LegacyRef | undefined”。
1.没赋初值
2. useRef里面没写对类型
正确的列子
const canvasRef = useRef<HTMLCanvasElement|null>(null)
/// ....
return <canvas ref={canvasRef }>
使用与要转换的文件匹配的文件 glob 运行以下命令。
npx jscodeshift -t https://raw.githubusercontent.com/mskelton/prop-types-to-ts/master/transform.ts GLOB
# Example
npx jscodeshift -t https://raw.githubusercontent.com/mskelton/prop-types-to-ts/master/transform.ts src/ ** / * .{
tslint-react对TSLint和TypeScript具有同级依赖。
要将这些lint规则与默认预设一起使用,请通过extends关键字使用配置继承。 这是一个示例配置,其中tslint.json与node_modules文件夹相邻:
"extends" : [ "tslint:latest" , "tslint-react" ] ,
"rules" : {
// override tslint-react rules here
"jsx-wrap-multiline" : false
(JSX attribute) React.ClassAttributes.ref?: React.LegacyRef
Type ‘MutableRefObject’ is not assignable to type ‘LegacyRef’.
Type ‘MutableRefObject’ is not assignable to type ‘RefObject’.
Types of property ‘current’ are incompatible.
Property ‘align’ is miss
这段代码是 TypeScript 的类型注解,表示一个名为 `current` 的可变引用类型变量,它的初始值为 `null`。在 React 中,`useRef` hook 返回的是一个可变引用类型变量,因此需要使用 `React.MutableRefObject` 类型来进行类型注解。该类型定义在 React 的声明文件中,并且具有一个泛型参数,用于指定引用变量的类型。在这个例子中,`React.MutableRefObject` 表示一个可变引用类型变量,其初始值为 `null`。
1.和vue的生命周期有关,必须要在从mounted开始拿,才能拿得到里面的Dom元素
2.想在element ui 对话框打开后取dom时,应该使用$nextTick,而不是直接使用this.$refs. imgLocal2:
console.log('this.$refs.imgLocal2外面', this.$refs.imgLocal2);
// useRef 没有传入参数,也就是传入了 undefined
// 查看 divRef 的类型。
// const divRef: React.MutableRefObject<HTMLDivElement | undefined>
const divRef = useRef<HTMLDivElement>();
return (