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

Anuj 发表于 Dev

阿努吉

我想在画布内显示图像。我这样做是作为一个类组件，但我的要求是使用函数组件：

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>
    );
  }
}

舒巴姆·哈特里

由于您只需要在 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>
    );
}

PS，我强烈建议您在提出此类问题之前先阅读hooks的文档，并在将来尝试编写代码

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。