React 0.13 this.getDOMNode() 等效于 React.findDOMNode() [英] React 0.13 this.getDOMNode() equivalent to React.findDOMNode()

问题描述

这在 React 0.12 版中运行良好:

This works perfectly fine in React version 0.12:

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

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

The variable dom gets the actual DOM node for the rendered component. However, converting this to React 0.13 does not work as expected:

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

我试过 React.findDOMNode(this) 也不管用.基本上我只是想在不使用 ref 的情况下获取渲染函数渲染的顶级 dom 节点.这可能吗?

I tried React.findDOMNode(this) which does not work either. Basically I'm just trying to fetch the top-level dom node rendered by the render function without using a ref. Is this possible?

推荐答案

更新 React v0.14+

在 React v0.14+ 这已经改变了，你现在应该使用 react-dom 模块:

In React v0.14+ this has changed, you should now use the react-dom module:

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 及以下

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

Passing this as the parameter should definitely work:

React.findDOMNode(this);

如果没有，可能会发生其他事情.请参阅下面的演示:

If not, something else may be going on. See demo below:

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>

这篇关于React 0.13 this.getDOMNode() 等效于 React.findDOMNode()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！