Я хочу отобразить изображение внутри холста. Я сделал это в компоненте класса, но мое требование должно отображаться в функциональном компоненте

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 hook

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. Я настоятельно рекомендую вам перейти на документацию по хукам и дать вам попытку кода в будущем. перед тем как задать такой вопрос