如何使用React Context将HTML5 Canvas上下文传递给子组件？

你的思路完全可行——React Context就是用来在组件树中跨层级传递数据的完美工具，不过当前代码因为React生命周期时机的问题会导致子组件拿到的Canvas上下文是undefined，进而报错。我来帮你修正并解释原因：

问题根源 #

你在render里通过ref回调直接给this.context赋值，但ref回调的执行时机是组件挂载完成后，而render方法执行时，ref还没触发，所以此时this.context是undefined，Provider传递给子组件的就是无效值，子组件调用ctx.moveTo自然会报错。

修正后的实现 #

我们需要用组件的state来存储Canvas上下文，这样当上下文被获取到后，通过setState触发组件重新渲染，确保Provider传递的是有效的上下文：

1. 修正Screen组件

const CanvasContext = React.createContext(null); // 初始值设为null更合理

class Screen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      canvasCtx: null
    };
  }

  render() {
    return (
      <div>
        <canvas
          id="myCanvas"
          ref={(canvasElement) => {
            // 确保canvas元素存在时再获取上下文
            if (canvasElement) {
              const ctx = canvasElement.getContext('2d');
              this.setState({ canvasCtx: ctx });
            }
          }}
          width="200"
          height="100"
          style={{ border: '1px solid black' }}
        ></canvas>
        <CanvasContext.Provider value={this.state.canvasCtx}>
          {this.props.children}
        </CanvasContext.Provider>
      </div>
    );
  }
}

2. 修正Test子组件

子组件需要先判断上下文是否存在，避免初始渲染时因为ctx为null而报错：

class Test extends React.Component {
  render() {
    return (
      <CanvasContext.Consumer>
        {(ctx) => {
          if (ctx) {
            // 上下文有效时执行绘图操作
            ctx.moveTo(0, 0);
            ctx.lineTo(200, 100);
            ctx.stroke();
          }
          // 可以返回空或者其他UI元素
          return null;
        }}
      </CanvasContext.Consumer>
    );
  }
}

关键改动说明 #

• 用state存储上下文：当ref回调获取到Canvas上下文后，调用setState会触发Screen组件重新渲染，此时Provider的value会更新为有效的上下文，子组件就能拿到正确的值。
• 初始Context值设为null：因为Canvas上下文是对象类型，初始状态下不存在，用null比字符串'default'更符合实际场景。
• 子组件增加空判断：组件第一次渲染时，Screen还未完成挂载，上下文是null，必须先判断再执行绘图方法，避免控制台报错。

这样修改后，你的子组件就能正常访问并使用Canvas上下文了。

内容的提问来源于stack exchange，提问作者ep84