React 与 dom 互动

Question

我如何 'talk' 与 dom 元素一起反应？

例如 - 我需要将一些动作与一些 js 库绑定

两种方法 returns 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) returns html 虽然来自渲染本身

我如何与他们合作？正确的生命周期方法是什么？

Answer 1

您使用 "refs":

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

一旦您的组件渲染完成，使用上面的方法，它的 div 属性（您可以使用任何您想要的名称）将引用渲染的 div 元素。

这是一个主要从上面的 link 复制的示例，它在呈现时聚焦文本输入：

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>

React 与 dom 互动

React interract with dom

javascript

reactjs

react-dom