Question

我该怎么说＆＃39;用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

您使用"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>

反应与dom相互影响

1 个答案: