这在React版本0.12中运行得非常好:
componentDidMount: function () {
var dom = this.getDOMNode();
}
变量dom获取渲染组件的实际DOM node .但是，将其转换为React 0.13并不能像预期的那样工作:
componentDidMount: function () {
var dom = React.findDOMNode();
// dom is undefined
}
我试了React.findDOMNode(this)次，但也没用.基本上，我只是try 在不使用ref的情况下获取渲染函数渲染的顶级dom node .这可能吗？
Update React v0.14+
在react v0中.14+this has changed，您现在应该使用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 and below
将其作为参数传递肯定会起作用:
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>