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)哪个也行不通.基本上我只是试图获取渲染函数渲染的顶级dom节点而不使用ref.这可能吗？

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

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

Answer 2

请注意,从React v0.14开始

React.findDOMNode成为ReactDom.findDOMNode(this);哪里

var ReactDom = require('react-dom');

如https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html中所述

Answer 3

React 15.0.1需要以下语法: ReactDOM.findDOMNode

例如

var x = ReactDOM.findDOMNode(this.refs.author);