React 0.13 this.getDOMNode（）等同于React.findDOMNode（）

Question

在React版本0.12中这可以很好地工作：

componentDidMount: function () {
    var dom = this.getDOMNode();
}

该变量dom获取渲染组件的实际DOM节点。但是，将其转换为React 0.13不能按预期工作：

componentDidMount: function () {
    var dom = React.findDOMNode();
    // dom is undefined
}

我尝试了React.findDOMNode(this)哪一种也不起作用。基本上，我只是试图在不使用ref的情况下获取render函数渲染的顶级dom节点。这可能吗？

Answer 1

更新React v0.14 +

在React v0.14
+中，这已经更改，您现在应该使用react- dom模块：

import ReactDOM from 'react-dom';

ReactDOM.findDOMNode(this);

ES6

class Test extends React.Component {

  componentDidMount() {

    const element = ReactDOM.findDOMNode(this);

    console.log(element);

    alert(element);

  }



  render() {

    return (

      <div>test</div>

    );

  }

}



ReactDOM.render(<Test />, document.getElementById('r'));


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>

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

<div id="r" />

ES5

var Test = React.createClass({

  componentDidMount: function() {

    var dom = ReactDOM.findDOMNode(this);

    console.log(dom);

    alert(dom);

  },

  render: function() {

    return React.createElement('div', null, 'test');

  }

});



ReactDOM.render(React.createElement(Test), document.getElementById('r'));


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>

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

<div id="r" />

React v0.13及以下

将此作为参数传递肯定可以工作：

React.findDOMNode(this);

如果没有，则可能正在发生其他情况。请参见下面的演示：

var Test = React.createClass({

  componentDidMount: function() {

    var dom = React.findDOMNode(this);

    console.log(dom);

    alert(dom);

  },

  render: function() {

    return React.DOM.div(null, 'test');

  }

});



React.render(React.createElement(Test), document.getElementById('r'));


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.js"></script>

<div id="r"></div>