如何使用 React 的 Context 功能将 HTML5 Canvas 上下文传递给 this.props.children？

Question

我正在尝试更流畅地了解 React 如何传递信息，并且出现了这个测试用例：

我有一个由 Canvas 对象和无限数量的孩子组成的组件。我想让孩子们访问这个组件的画布上下文。

我想知道我是否可以给组件一个带有画布上下文的 React Context 并用它包装孩子，然后让各个孩子选择成为消费者。然而，我不习惯 React 或其生命周期，不知道如何正确地做到这一点。我是不是彻底没了？这甚至可能吗？

这是有问题的组件：

const CanvasContext = React.createContext('default');
class Screen extends React.Component
{    

  render(){

    return (<div>
              <canvas id="myCanvas" ref={(c) => this.context = c.getContext('2d')} width="200" height="100" style={{border: '1px solid black'}}></canvas> 
              <CanvasContext.Provider value = {this.context}>{this.props.children}
              </CanvasContext.Provider>
          </div>);

  }
}

现在，它包含一个孩子：

class Test extends React.Component{

  render(){
    return <CanvasContext.Consumer>{ctx => {
              ctx.moveTo(0, 0);
              ctx.lineTo(200, 100);
              ctx.stroke();}}
          </CanvasContext.Consumer>;   
  }
}
ReactDOM.render(<Screen><Test/></Screen>, document.getElementsByClassName('container-fluid')[0]);

对此的帮助将不胜感激。

编辑：这是一个 Codepen：https ://codepen.io/ejpg/pen/XqvGdp

Answer 1

这是一个好主意，但你有几个问题：

1) 你的代码笔中的 React 版本是15.4. 您正在使用的新上下文 api 是在16.3. 这就是您的 codepen 抛出错误的原因：

未捕获的类型错误：React.createContext 不是函数

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

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

ctx.moveTo 不是函数

3) 这是一个很好的机会，可以使用16.3的createRef功能来帮助管理您的 ref；

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>
    );
  }
}

这足以让您的测试组件在渲染上绘制！

代码沙盒上的完整代码