Реагировать взаимодействовать с домом

Question

Как я могу "разговаривать" с элементами dom с реагировать?

Например - мне нужно связать некоторые действия с некоторыми js lib

Оба подхода возвращаются undefined по какой-то причине

componentDidMount() {

    const element1 = document.querySelector('.home-container')
    const element2 = ReactDOM.findDOMNode(this);

     // returns undefined, undefined
    console.log(element1.length, element2.length); 

}

render() {

    return (
        <div className="home-container">
            ...
        </div>
    )
}

Но console.log(element1) хотя возвращает html из самого рендера

Как я могу работать с ними? И какой правильный метод жизненного цикла для этого?

Answer 1

Вы используете "ссылки":

<div ref={e => {this.div = el}} ...>...</div>

Как только ваш компонент рендерится, с вышеупомянутым, его div свойство (вы можете использовать любое имя, которое вы хотите) будет относиться к div элемент, который был предоставлен.

Вот пример, в значительной степени скопированный из ссылки выше, которая фокусирует текстовый ввод при его визуализации:

class AutoFocusTextInput extends React.Component {
  componentDidMount() {
    this.textInput.focus();
  }

  render() {
    return (
      <input type="text"
        ref={(input) => { this.textInput = input; }} />
    );
  }
}

ReactDOM.render(
  <AutoFocusTextInput />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>