How to call nested component methods?

Question

React

Good evening, I have a class component that works with <canvas>
It implements all the necessary methods for rendering.

class Layout extends React.Component {
  canvas = React.createRef();
 
  // методы для отрисовки, отчистки и тп
  draw = (x1, y1, x2, y2) => {
    // рисуем линию 
  };

  render() {
    return <canvas ref={this.canvas />;
  }
}

How can I call drawthis class method from parent components ?
Roughly speaking, I need to manage <Layout />from parent components.
The level of nesting can be different.

So far, I know only 1 option (whether it checked the worker):
Use the context, pass the ref to the component <Layout />and use it to manage the component.

What are the ways to solve this?

PS I know that usually components are controlled using state, props, but in my case, when working with canvas, this is not suitable.

Answer 1

React.useEffect , where depending on the prop to pass, can help you.