Почему функция getContext не может быть вызвана для объекта React JSX <canvas>?

Question

У меня есть следующий код в подклассе React.Component

class SearchObject extends React.Component { 

    constructor(props) {
        super(props)

        var activateCanvas = <canvas></canvas>

        var activateDraw = () => {
            let ctx = activateCanvas.getContext('2d')
            //draw stuff
        }

        activateDraw()

        this.state = {
            activate: activateCanvas
        }
    }
...

строка activateCanvas.getContext('2d') вернула ошибку, говоря, что getContext не является функцией. Интересно, почему activCanvas здесь не является элементом Element. Нужно ли ждать, пока элемент будет отображен, и вызывать что-то вроде document.getElementById (), чтобы использовать getContext ()? Спасибо

Answer 1

Да, вам нужно визуализировать реактивный элемент, который вы создали первым. Только тогда вы можете начать ссылаться на его элемент DOM. Я бы рекомендовал использовать ref для этого. Примерно так должно работать:

function App() {

  let ctx;
  var activateDraw = (ref) => {
    console.log('this is the canvas DOM element you want', ref)
    ctx = ref.getContext('2d')
    // draw stuff
  }
  var activateCanvas = (<canvas ref={(e) => activateDraw(e)}></canvas>)

  return (
    <div className="App">
      { activateCanvas /* don't forget to put the element into your render */}
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
         ....

Answer 2

JSX на самом деле не возвращает HTMLElement, он возвращает функцию рендеринга, поэтому вы в основном пытаетесь сделать это:

const canvas = function(props, createElement) { /* render canvas*/}; // forgot the ordering of renderFn args... sue me
canvas.getContext('2d');

Лично я использую JSX с Vue, и в в случае Vue, если вы хотите сделать что-то подобное, короткий ответ - да, вам придется подождать, пока он будет отрендерен, и затем использовать DOM, чтобы получить доступ к HTMLElement, созданному функцией рендеринга JSX. .

Надеюсь, кто-то с опытом в React подтвердит, что это так, или предоставит более точный ответ с учетом вашего конкретного c варианта использования с React.