无法读取未定义的属性(读取"getContext")

Question

我正在尝试使用GSAP制作滚动动画，但是，我似乎无法让useRef按我喜欢的方式工作。

我试图使canvasRef等于HTML中的画布，但我得到的错误:无法读取未定义的属性(读取'getContext')

和当我控制台日志canvasRef我得到返回{当前:未定义，宽度:1281，高度:800}

任何建议帮助将是伟大的，谢谢

function Landing() {
const canvasRef = useRef();
canvasRef.width = window.innerWidth;
canvasRef.height = window.innerHeight;
console.log(canvasRef);
const context = canvasRef.current.getContext("2d");
const frameCount = 230;
const currentFrame = (index) =>
`../../assets/landing-animations/${(index + 1).toString()}.jpg`;
const images = [];
let ball = { frame: 0 };
for (let i = 0; i < frameCount; i++) {
const img = new Image();
img.src = currentFrame(i);
images.push(img);
}
function render() {
context.clearRect(0, 0, canvasRef.width, canvasRef.height);
context.drawImage(images[ball.frame]);
}
return (
<div className="landing">
<h1 className="landing__header">Welcome to my portfolio</h1>
<canvas className="landing__canvas" ref={canvasRef}></canvas>;
</div>
);
}

Answer 1

您的代码在元素呈现之前正在运行。

把你所有的代码放到一个useEffect里面，它应该会解决你的问题。

useEffect(()=>{
// ... your code (except the return and definitions)
}, []);

数组需要为空(但仍然存在)，以便React知道只运行一次。
该函数将运行一次onMount。(反应的文档)

确保您将useRefs和其他定义留在useEffect之外，以便您可以从代码中访问ref。

function Landing() {
const canvasRef = useRef();
canvasRef.width = window.innerWidth;
canvasRef.height = window.innerHeight;
console.log(canvasRef);

useEffect(() => {
if (canvasRef.current == null) return;
const context = canvasRef.current.getContext("2d");
const frameCount = 230;
const currentFrame = (index) =>
`../../assets/landing-animations/${(index + 1).toString()}.jpg`;
const images = [];
let ball = { frame: 0 };
for (let i = 0; i < frameCount; i++) {
const img = new Image();
img.src = currentFrame(i);
images.push(img);
}
function render() {
context.clearRect(0, 0, canvasRef.width, canvasRef.height);
context.drawImage(images[ball.frame]);
}
}, []);
return (
<div className="landing">
<h1 className="landing__header">Welcome to my portfolio</h1>
<canvas className="landing__canvas" ref={canvasRef}></canvas>;
</div>
);
}