React入门系列教程（十）使用ref直接访问DOM

有的时候我们需要直接和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元素的引用。