Como obter o elemento de um componente React

O JSX é uma pseudolinguagem incrível para o React e, para ser sincero, foi o que me fez gostar tanto do React. Usar o React sem JSX é complicado e frustrante, enquanto usar JSX é uma maneira muito mais fácil de expressar seu código. Uma desvantagem do JSX, no entanto, é que ele torna o acesso aos elementos do componente indireto, se não difícil.

A verdade é que acessar os próprios elementos de um componente é muito mais fácil do que a maioria pensa. Vejamos como um método de componente pode acessar seu próprio nó DOM com JavaScript:

Método 1: react-dom

react-dom fornece um findDomNode para encontrar o nó do componente:

// Get ReactDOM
import ReactDOM from "react-dom";

// In your component method
class MyComponent extends Component {

    myMethod() {
        const node = ReactDOM.findDOMNode(this);
    }

}

Com ReactDOM.findDOMNode(this), o senhor pode obter o nó principal do widget e, a partir daí, usar os métodos típicos do DOM:

const node = ReactDOM.findDOMNode(this);

// Get child nodes
if (node instanceof HTMLElement) {
    const child = node.querySelector('.someClass');
}

Isso mistura um pouco de React e manipulação básica de DOM em JavaScript.

Método 2: ref

Outro método de obter nós DOM é usar refs; um exemplo de uso está detalhado em meu React e autofoco:

class MyComponent extends Component {

  // The element we want to retrieve
  _input: ?HTMLInputElement;

  // ....

  componentDidUpdate() {
    this._input.focus();
  }

  render() {
      return (
        <div>
            <input
              ref={c => (this._input = c)}
            />
        </div>
      );
    }
  }
}

Adicionando um ref ao elemento que você deseja manipular é uma abordagem mais centrada no React para obter uma manipulação de um elemento. Ambas as estratégias funcionam bem, portanto, escolha a que o senhor preferir!