reactjs - Pass down a canvas ref through Context in React -

i working on implementing canvas rendering using components. have following component attempts layout canvas page, , have subcomponents in stage component draw context.

i need reference canvas elements renderer component rendering. ask ref in jsx, , set on component when it. i'm using react context, children components can access canvas reference. problem i'm having seems getchildcontext called before canvas ref assigned , children component access undefined canvas , no drawing 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>             )     } } 

you can access ref after in componentdidmount (after rendered). parent component considered rendered when of children rendered. children can't access parent's ref before rendered. instead of returning canvas ref directly, try pass custom function getcanvas() instead:

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

and in children component call function retrieve canvas ref.