react组件的三大属性之三refs

目录

一、react组件的三大属性之三refs

1、react组件的三大属性

2、使用方法

3、模块化管理

4、回调Refs

---

一、react组件的三大属性之三refs

1、react组件的三大属性

（1）props属性：封装传递给组件的参数

（2）state属性：组件的状态,当值发生改变后,重新渲染组件

（3）refs属性

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

2、使用方法

（1）方式一(React的版本必须是16.3以上的版本)：createRef()

• 可以获取render中的dom元素(html元素) -- html元素的实例
• 可以和类组件进行绑定 --- 代表类组件的实例

3、模块化管理

（1）CommonJS的模块管理：node使用该方式进行模块管理

• module.exports = 模块名

（2）React进行模块管理：每个模块都有一个唯一的默认名称(组件名)

• exports default 模块名    

import React, { Component } from "react";

class RefsComponent extends Component{
    constructor(props) {
        super(props);
        this.myref = React.createRef(); //创建refs，可以关联render中DOM元素
        console.log(this.myref)
    }
    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>
        )
    }
}

export default RefsComponent;

（3）调用子组件的方法

//children.jsx（存放子组件）
import React,{ Component } from "react";

class Children extends Component{
    bianshen(){
       alert('西湖清宴不知回，一曲离歌酒一杯')
    }
    render(){
        return <span>杭州西湖</span>
    }
}

export default Children;

//Parent.jsx创建父组件
import React, {Component, createRef} from "react";
import Children from "./Children";

class Parent extends Component{
    constructor(props) {
        super(props);
        this.myref = createRef()
    }
    componentDidMount() {
    }
    handleClick(){
        this.myref.current.bianshen()
    }
    render() {
        return (
            <div>
                <Children ref={ this.myref }/>
                <button onClick={ this. handleClick.bind(this) }>调用子组件的方法</button>
            </div>
        )
    }
}

export default Parent;

注意：对于函数组件，无法获取refs

4、回调Refs

import React,{Component} from "react";

class Example extends React.Component{
    constructor(props) {
        super(props);
        this.targetRef = null;
        this.myRef = (e) =>this.targetRef=e;
    }
    componentDidMount() {
        if(this.targetRef){
            this.targetRef.innerHTML = "小森同学";
        }
    }
    render(){
        return(
            <div ref={this.myRef}></div>
        )
    }
}
export default Example