在React版本0.12中这可以很好地工作:
componentDidMount: function () { var dom = this.getDOMNode(); }
该变量dom获取渲染组件的实际DOM节点。但是,将其转换为React 0.13不能按预期工作:
dom
componentDidMount: function () { var dom = React.findDOMNode(); // dom is undefined }
我尝试了React.findDOMNode(this)哪一种也不起作用。基本上,我只是试图在不使用ref的情况下获取render函数渲染的顶级dom节点。这可能吗?
React.findDOMNode(this)
更新React v0.14 +
在React v0.14 +中,这已经更改,您现在应该使用react- dom模块:
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>