javascript - 你应该如何将 Canvas 上下文传递给 React 中的方法？

Question

第一次在 React 中使用 Canvas 。我想知道为 Canvas 上下文提供方法的最佳方法是什么(如下面的绘画)。我应该使用 Refs 吗？状态？或者有没有别的办法。谢谢

到目前为止，这是我使用 refs 的结果:

class Canvas  extends React.Component{
  canvasRef = React.createRef();
  contextRef = React.createRef();

  componentDidMount() {
    const canvas = this.canvasRef.current;
    const context = canvas.getContext("2d");
    this.contextRef.current = context;
  }

  paint = (e) => {
    this.contextRef.current.lineTo(e.clientX, e.clientY);
    this.contextRef.current.stroke();
  };

  render() {
    return ( <
      canvas id = "canvas"
      ref = {
        this.canvasRef
      }
      onMouseMove = {
        this.paint
      }
      />
    );
  }
}

Answer 1

Refs 对于获取 Canvas 是正确的，但我建议您每次需要时都获取 2D 上下文(getContext 只返回与上一次相同的上下文)。

您的代码还有其他一些小问题，这里是一个示例，将上下文放在实例属性中，并修复了内联调用的各种问题。

class Canvas extends React.Component { // *** Note: You need to extend `React.Component`
    canvasRef = React.createRef(); // *** Note: You shouldn't have `this.` here
  
    paint = (e) => {
        // ** Get the canvas
        const canvas = this.canvasRef.current;
        if (!canvas) {
            return; // This probably won't happen
        }
        // Get the context
        const context = canvas.getContext("2d");
        // Get the point to draw at, allowing for the possibility
        // that the canvas isn't at the top of the doc
        const { left, top } = canvas.getBoundingClientRect();
        const x = e.clientX - left;
        const y = e.clientY - top;
        context.lineTo(x, y);
        context.stroke();
    }; // *** Added missing ; here
  
    render() {
        return <canvas ref={this.canvasRef} onMouseMove={this.paint} />;
    }
}

(我删除了 Canvas 上的 id，因为您的组件可能会在多个地方使用。)

在评论中，您提到了导致问题的状态更改问题(我在尝试获取和保留上下文而不是每次都获取上下文时也看到了这一点)，所以我将状态添加到父容器元素，并且到以下示例中的 Canvas 元素，以检查它是否继续工作，确实如此:

const { useState } = React;

class Canvas extends React.Component { // *** Note: You need to extend `React.Component`
    canvasRef = React.createRef(); // *** Note: You shouldn't have `this.` here
  
    state = {
        ticker: 0,
    };
    
    paint = (e) => {
        // ** Get the canvas
        const canvas = this.canvasRef.current;
        if (!canvas) {
            return; // This probably won't happen
        }
        // Get the context
        const context = canvas.getContext("2d");
        // Get the point to draw at, allowing for the possibility
        // that the canvas isn't at the top of the doc
        const { left, top } = canvas.getBoundingClientRect();
        const x = e.clientX - left;
        const y = e.clientY - top;
        context.lineTo(x, y);
        context.stroke();
    }; // *** Added missing ; here
  
    increment = () => {
        this.setState(( { ticker }) => ({ ticker: ticker + 1 }));
    };
    
    render() {
        const { ticker } = this.state;
        return <div>
            <canvas ref={this.canvasRef} onMouseMove={this.paint} />
            <div onClick={this.increment}>Canvas ticker: {ticker}</div>
        </div>;
    }
}

class Example extends React.Component {
    state = {
        ticker: 0,
    };
    
    increment = () => {
        this.setState(({ ticker }) => ({ ticker: ticker + 1 }));
    };
    
    render() {
        const { ticker } = this.state;
        return <div>
            <div onClick={this.increment}>Parent ticker: {ticker}</div>
            <Canvas />
        </div>;
    }
}

ReactDOM.render(<Example />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>