javascript - React 与 dom 交互

Question

如何通过 React 与 dom 元素“对话”？

例如 - 我需要将一些操作与一些 js 库绑定(bind)

由于某种原因，两种方法都会返回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

您使用 "refs" :

<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>