Pass down a canvas ref through Context in React

Question

I am working on implementing some canvas rendering by using Components. I have the following Component which attempts to layout the canvas to the page, and have subcomponents in the Stage component draw to its context.

I need a reference to the canvas elements that my Renderer component is rendering. So I ask for the ref in the JSX, and set it on my component when I get it. I'm also using React context, so that all the children components can access this canvas reference. The problem I'm having is that it seems getChildContext is called before the canvas ref is assigned and so all the children component access an undefined canvas and no drawing is done.

export default class Renderer extends React.Component {

    static childContextTypes = {
        canvas: PropTypes.object
    };

    getChildContext() {
        console.log("get child context")
        return { canvas: this.canvas };         
    }

    render() {

        return (
            <div className="CanvasHolder" key={0}>
            <canvas className="MainCanvas" ref= { 
                canvas => { 
                    this.canvas = canvas 
                    console.log("got ref");

                }
                } />
            <Stage />
            </div>
            )
    }
}

Answer 1

You can access the ref only after in componentDidMount (after it is rendered). But the parent component is considered rendered only when all of its children are rendered. So children can't access parent's ref before it is rendered. Instead of returning canvas ref directly, try to pass custom function getCanvas() instead:

getCanvas = () => {
  return this.canvas
}

And then in your children component call this function to retrieve canvas ref.