React基础教程(十) - 博客详情

React支持一种非常特殊的属性Ref，你可以用来绑定到render()输出的任何组件上。

1.refs

通过refs属性可以去访问DOM元素或render函数中的react元素(虚拟的DOM元素) 。本质是ReactDOM.render()函数返回的实例(分为组件实例或DOM节点)

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>
    <!--React.PropTypes 在 React v15.5 版本后已经移到了prop-types 库。-->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">

</div>
<script type="text/babel">

    class RefsComponent extends React.Component{
        constructor(props) {
            super(props);
            this.myref = React.createRef(); //创建refs，可以关联render中DOM元素
            console.log(this.myref)
        }
        // componentDidMount(),即在组件加载完成，render()之后调用，这个方法只会触发一次
        componentDidMount() {
            this.myref.current.innerHTML = '小爱同学'
        }
        handleClick(){ //普通的成员函数,没有绑定this
            this.myref.current.innerHTML = "浙江杭州"
        }
        render(){
            return (
                <div>
                    <div ref={ this.myref } ></div> {/* 将div与this.myref进行关联,对this.myref的操作实际就是操作div*/}
                    <br/><br/>
                    <button onClick={ this.handleClick.bind(this) }>点击修改DIV的内容</button>
                </div>
            )
        }
    }

    //渲染组件到页面
    ReactDOM.render(<RefsComponent />, document.getElementById('app'))

</script>
</body>
</html>

运行结果：