日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

React中的Refs屬性你來(lái)了解嗎_React

作者：橘貓吃不胖～ ? 更新時(shí)間： 2022-05-11 編程語(yǔ)言

1 介紹

react組件的三大屬性：

1.props屬性：封裝傳遞給組件的參數(shù)

2.state屬性：組件的狀態(tài)，當(dāng)值發(fā)生改變后，重新渲染組件

3.refs屬性：

（1）通過(guò)該屬性可以去訪問(wèn)DOM元素或render函數(shù)中的react元素（虛擬的DOM元素） ——DOM元素或render函數(shù)中的react元素的代理（句柄）

（2）本質(zhì)是ReactDOM.render()函數(shù)返回的實(shí)例（組件實(shí)例或DOM節(jié)點(diǎn)）

Refs在計(jì)算機(jī)中稱(chēng)為彈性文件系統(tǒng)。React中的Refs提供了一種方式，允許我們?cè)L問(wèn)DOM節(jié)點(diǎn)或在render方法中創(chuàng)建的React元素。本質(zhì)為ReactDOM.render()返回的組件實(shí)例，如果是渲染組件則返回的是組件實(shí)例，如果渲染dom則返回的是具體的dom節(jié)點(diǎn)。

作用：Refs時(shí)React提供給我們安全訪問(wèn)DOM元素或者某個(gè)組件實(shí)例的句柄。在類(lèi)組件中，React將ref屬性中第一個(gè)參數(shù)作為DOM中的句柄。在函數(shù)組件中，React用hooks的api useRef也能獲得ref。

2 使用方法

2.1 createRef（版本>=React16.3）

一般在構(gòu)造函數(shù)中將refs分配給實(shí)例屬性，以供組件的其他方法中使用。

1、對(duì)于html元素：可以獲取元素實(shí)例

示例代碼：

class Refs extends React.Component {
    constructor(props) {
        super(props);
        // 在構(gòu)造函數(shù)中初始化一個(gè)ref，然后在return中就可以使用了
        this.myRef = React.createRef();
        console.log(this.myRef);
    }
    componentDidMount() { // 在render()函數(shù)執(zhí)行完成后調(diào)用
        this.myRef.current.innerHTML = "橘貓吃不胖"; // this.myRef中有一個(gè)current屬性
    }
    render() {
        return (
            

                {/*如果ref屬性被用于html，那么它的值就是底層DOM元素*/}
                

            

        );
    }
}

在這里插入圖片描述

2、可以和類(lèi)組件進(jìn)行綁定 —— 代表類(lèi)組件的實(shí)例

示例代碼：

class Refs extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }
    componentDidMount() {
        // 在父組件中調(diào)用了子組件的方法
        this.myRef.current.change();
    }
    render() {
        return 
    }
}

class Children extends React.Component {
    change() {
        console.log("橘貓吃不胖變身");
    }
    render() {
        return 橘貓吃不胖
    }
}

2.2 回調(diào)Refs

React將在組件掛載時(shí)，會(huì)調(diào)用ref回調(diào)函數(shù)并傳入DOM怨怒是，當(dāng)卸載時(shí)調(diào)用它并傳入null。早componentDidMount或componentDidUpdate觸發(fā)前，React會(huì)保證refs一定是最新的。

示例代碼：

class Refs extends React.Component {
    constructor(props) {
        super(props);
        this.targetRef = null;
        this.myRef = (e) => this.targetRef = e;
    }
    componentDidMount() {
        console.log("this.refs" + this.refs.container);
    }
    render() {
        return 

            橘貓吃不胖
        

    }
}

2.3 String類(lèi)型的Refs（已過(guò)時(shí)，不推薦使用）

示例代碼：

class Refs extends React.Component {
    constructor(props) {
        super(props);
        this.targetRef = null;
        this.myRef = (e) => this.targetRef = e;
    }
    componentDidMount() {
        console.log("this.refs" + this.refs.container);
    }
    render() {
        return 

            橘貓吃不胖
        

    }
}

2.4 useRef（React Hooks）

function HookRef(props) {
    const inputElement = useRef();
    return (
        

            
            
        

    )
}

總結(jié)

原文鏈接：https://blog.csdn.net/m0_46612221/article/details/123360259

欄目分類(lèi)
最近更新