TypeError: ctx.translate не является функцией

Question

Я следую руководству по использованию реакции с html5 холстом. Автор использует базовый компонент класса и поэтому использует componentDidMount при визуализации метода updateCanvas ().

Я использую компонент на основе функций вместе с хуками. Поэтому я использую useEffect при отображении методов drawTree, Branch и Leaf.

Я получаю сообщение об ошибке «TypeError: ctx.translate не является функцией» в моем браузере, а в песочнице Я не получаю сообщения об ошибке, но мой компонент не отображается. Кроме того, в моем редакторе кода .getContext ('2D') неактивен, и когда я наводю на него курсор, я получаю сообщение «неразрешенная функция или метод».

Answer 1

Вы должны использовать ключ .current ссылки ctx для доступа к нему. Например:

function drawTree() {
  ctx.strokeStyle = "#fff";
  ctx.beginPath();
  ctx.translate(state.centerX, state.bottom);
  branch(...state);
  ctx.stroke();
}

должно быть:

function drawTree() {
  ctx.current.strokeStyle = "#fff";
  ctx.current.beginPath();
  ctx.current.translate(state.centerX, state.bottom);
  branch({ ...state }); // Fixed this line too, `branch` is taking an object as its argument.
  ctx.current.stroke();
}