画布.tsx -对象可能是'null‘，属性'getContext’不存在于‘从不’类型上。
画布.tsx -对象可能是'null‘，属性'getContext’不存在于‘从不’类型上。
提问于 2022-06-12 22:01:29
我正在尝试创建一个可以放在我的应用程序中的画布组件。
最后，我将使它的用户可以利用它。
错误在这一行上：
const context = canvas.getContext("2d");对象可能为“空”。
如果我把它改为：
const context = canvas?.getContext("2d");我得到：
属性“getContext”在“从不”类型上不存在
以下是组件的完整代码：
const Canvas = (props: CanvasProps) => {
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
const context = canvas.getContext("2d");
//Our first draw
context.fillStyle = "#000000";
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}, []);
return <canvas ref={canvasRef} {...props} />;
};
export default Canvas;回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-14 07:48:22
我试过几次，得到了这样的解决方案：
const Canvas = (props: CanvasProps) => {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const canvas = canvasRef.current;
if (canvas == null) return; // current may be null
const context = canvas.getContext("2d");
if (context == null) return; // context may be null
//Our first draw
context.fillStyle = "#000000";
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}, []);
return <canvas ref={canvasRef} {...props} />;
};
export default Canvas;首先，使用useRef<HTMLCanvasElement>(null)使TS知道useRef获得HTML元素
根据React文档，useRef()结果在呈现之前为null，因此我们添加if (canvas == null) return;以避免其为null；
根据getContext()文件，结果可能为null，因此我们添加了if (context == null) return;
可执行代码是这里
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72596200
复制相关文章
相似问题
腾讯云开发者
