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

Question

I'm trying to become more fluent with how React passes around information, and this test case came up:

I have a component made up of a Canvas object and an indefinite amount of children. I would like to give the children access to this component's canvas context.

I was wondering if I could give the component a React Context with the canvas context and wrap the children with it, then have the individual children choose to be consumers. However, I'm not used to React or its lifecycle enough to know how to do this correctly. Am I completely off? Is this even possible?

This is the component in question:

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

  }
}

Right now, it contains one child:

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

Help with this would be greatly appreciated.

EDIT: Here's a Codepen: https://codepen.io/ejpg/pen/XqvGdp

Answer 1

This is a fine idea, but you have a few issues:

1) The version of React in your codepen is 15.4 . The new context api which you are using was introduced in 16.3 . This is why your codepen is throwing the error:

Uncaught TypeError: React.createContext is not a function

2) When the first render happens, the ref won't exist yet which will cause this function call to crash since the context can't possibly exist yet:

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

ctx.moveTo is not a function

3) This is a great opportunity to use 16.3 's createRef function which helps manage your ref;

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

4) Getting the context needs to happen after the first render anyway, then you want to trigger a re-render once you have that context to pass it down so state is a good place for that:

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

That's enough to get your Test component to draw on render!

Full code on codesandbox