Как вызвать методы вложенного компонента?

Question

[alex4answ]

Добрый вечер, у меня есть классовый компонент, который работает с <canvas>
В нем реализованы все необходимые методы для отрисовки.

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

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

Как я могу вызвать метод draw этого класса из родительских компонентов ?
Грубо говоря мне нужно управлять <Layout /> из родительских компонентов.
Уровень вложенности может быть разный.

Пока знаю только 1 вариант (не проверял рабочий ли он):
Использовать контекст, передавать ref на компонент <Layout /> и использовать ее для управления компонентом.

Какие способы решения этому есть?

P.S. Я знаю что обычно компоненты управляются с помощью state, props, но в моем случае, при работе с canvas это не подходит.

Comments

[Алексей Уколов]

Я знаю что обычно компоненты управляются с помощью state, props, но в моем случае, при работе с canvas это не подходит

Почему?

[alex4answ]

Алексей Уколов, потому что нужен контроль над 2d контекстом canvas, некоторые компоненты должны вывести изображение, некоторые просто линии и тп.

Я предполагаю что можно передавать в props <Layout/> определенные команды, но команд будет очень много.
Да и честно говоря я не видел как это реализуется при работе с canvas, обычно просто props/state рендерят и там все просто, понятно

[Алексей Уколов]

В целом, это можно решить стандартным подходом через componentDidUpdate(). Документация даже прямо описывает что-то близкое к вашему случаю:

Use this as an opportunity to operate on the DOM when the component has been updated.

Но как сделать такой код поддерживаемым и безглючным в условиях, когда команд много, я не очень представляю. Тут уже надо на конкретный код смотреть.

[alex4answ]

Алексей Уколов, Понимаю, но решил все методы для работы перенести в контекст, тк добавилось еще пару useCases для компонента, теперь только не знаю как разделить его по зонам ответственности, а-то получился комбайн какой-то ))
Спасибо :)

Answer 1

[Maxim Bredikhin]

React.useEffect, в котором в зависимости передать проп, может вам помочь.

Comments

[alex4answ]

Maxim Bredikhin что ?
Вы вопрос читали?
причем тут useEffect и prop в зависимостях?

У меня классовый компонент, я писал про передачу комманд в prop, но это не мой случай тк нужен контроль над 2d контекстом