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);
      ctx.font = "40px Courier";
      ctx.fillText(this.props.text, 210, 75); // THIS IS THE PLACE TEXT IS EMBEDDED INTO THE PICTURE
    };
  }
  render() {
    return (
      <div>
        <canvas ref="canvas" width={640} height={425} />
        <img
          ref="image"
          alt="Stackoverflow56203352"
          src={backImg}
          className="hidden"
        />
      </div>
    );
  }
}

我正在尝试将其转换为功能形式，但由于缺乏对getContext的替换，我的工作一直停滞不前。

即我在这里尝试：

const Canvas = ({}) => {
  const canvas = useRef("")
  const ctx = canvas.getContext("2d")
  const img = useRef("")

  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.font = "40px Courier";
    ctx.fillText(this.props.text, 210, 75); // THIS IS THE PLACE TEXT IS EMBEDDED INTO THE PICTURE
  };  

  return (
          <div>
            <canvas ref="canvas" width={640} height={425} />
            <img
              ref="image"
              alt="Stackoverflow56203352"
              src={backImg}
              className="hidden"
            />
          </div>
        );

}

不剪掉。

完整的沙箱代码位于此location

Answer 1

主要变化是您需要在predict_fn中进行接线，并确保使用useEffect来访问画布和图像的当前参考。

最初，我认为它只能与单个.current一起使用，但是在重新加载页面时却失败了（我认为是由于图像被缓存并且没有再次触发useEffect）。添加第二个onload已解决了问题（感谢Dennis Vash的帮助）：

useEffect

另外，在您的参考资料（而不是引号）周围使用const Canvas = props => { const canvas = useRef(null); const image = useRef(null); useEffect(() => { const ctx = canvas.current.getContext("2d"); image.current.onload = () => { ctx.drawImage(image.current, 0, 0); ctx.font = "40px Courier"; ctx.fillText(props.text, 210, 75); }; }, []); useEffect(() => { const ctx = canvas.current.getContext("2d"); ctx.drawImage(image.current, 0, 0); ctx.font = "40px Courier"; ctx.fillText(props.text, 210, 75); }); return ( <div> <canvas ref={canvas} width={640} height={425} /> <img ref={image} alt="Stackoverflow56203352" src={backImg} className="hidden" /> </div> ); };。

使用两个{}钩子here

更新了沙箱

ReactJS将类更改为功能代码

1 个答案: