有的时候我们需要直接和DOM元素打交道，比如有的第三方库需要DOM元素作为参数，在react组件中如何可以直接访问到DOM元素呢？react给我们提供了一个ref属性专门做这个事儿。
<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
class RefTest extends React.Component {
componentDidMount() {
console.log(this.childNode)
}
render() {
return (
<div className="root">
Root
<div className="child" ref={node => (this.childNode = node)}>Child</div>
</div>
)
}
}
ReactDOM.render(<RefTest />, rootElement)
</script>
运行如上代码，我们会在控制台看到<div class="child">Child</div>，成功得到了DOM元素的引用。
