如何使用React的上下文功能将HTML5画布上下文传递给this.props.children?

这是一个好主意,但您有几个问题:

1)代码笔中的react版本是 15.4 . 在中引入了您正在使用的新上下文API。 16.3 . 这就是您的代码笔抛出错误的原因:

未捕获的类型错误:React.CreateContext不是函数

2)当第一次渲染发生时, ref 尚不存在,这将导致此函数调用崩溃,因为上下文尚不可能存在:

ctx.moveTo(0, 0); // ctx isn't defined yet

ctx.moveto不是函数

3)这是一个很好的使用机会 十六点三 的 createRef 帮助管理您的参考号的功能;

class Screen extends React.Component {
  canvas = React.createRef();
  render() {
    return <canvas ref={this.canvas} />
  }
}

4)无论如何,获取上下文需要在第一次渲染之后进行,然后您希望在有上下文传递后触发重新渲染,因此状态是一个很好的位置:

class Screen extends React.Component {
  state = { context: null };
  canvas = React.createRef();
  componentDidMount() {
    this.setState({ context: this.canvas.current.getContext("2d") });
  }
  render() {
    return (
      <div>
        <canvas ref={this.canvas} />
        {this.state.context && (
          <CanvasContext.Provider value={this.state.context}>
            {this.props.children}
          </CanvasContext.Provider>
        )}
      </div>
    );
  }
}

这就足够让测试组件在渲染上绘制了!

Full code on codesandbox