如何将 React 类组件转换为函数组件

Question

我想在画布内显示图像。我将其作为类组件执行此操作，但我的要求是使用函数组件：

class Canvas extends React.Component {
componentDidMount() {
const canvas = this.refs.canvas;
const ctx = canvas.getContext("2d");
const img = this.refs.image;    
img.onload = () => {
ctx.drawImage(img, 0, 0, this.props.data.w, this.props.data.h);
}
}  
render() {
const prop = this.props.data;
return (
<div data-id={prop.ukey} key={prop.ukey}>
<canvas data-id={prop.ukey} key={prop.ukey} ref="canvas" width={prop.w} height={prop.h} />
<img alt="doc-img" ref="image" src={prop.image} className="hidden" />
</div>
);
}
}

Answer 1

由于您只需要在 componentDidMount 中执行代码，因此具有空依赖项数组的useEffect是等效的。同样对于引用，您将使用useRef钩

子

const Canvas = ({data: prop}) => {
const img = useRef(null);
const cnv = useRef(null);
useEffect(() => {
const canvas = cnv.current;
const image = img.current;
const ctx = canvas.getContext("2d");  
image.onload = () => {
ctx.drawImage(image, 0, 0, prop.w, prop.h);
}
}, [])
return (
<div data-id={prop.ukey} key={prop.ukey}>
<canvas data-id={prop.ukey} key={prop.ukey} ref={cnv} width={prop.w} height={prop.h} />
<img alt="doc-img" ref={img} src={prop.image} className="hidden" />
</div>
);
}

附言我强烈建议您在提出此类问题之前先浏览钩子的文档，并在将来

尝试编写代码