亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

React使用ref進行訪問DOM元素或組件

 更新時間：2025年03月28日 09:20:50   作者：前端大白話  
在 React 里,ref 就像是一個神奇的小助手,能讓你直接去訪問 DOM 元素或者組件實例,下面就跟隨小編一起來學習一下具體的使用方法吧

在 React 里，ref 就像是一個神奇的小助手，能讓你直接去訪問 DOM 元素或者組件實例。這就好比你在一群人中，能直接叫出某個人的名字并和他交流一樣。接下來，我會詳細說說怎么用 ref，還會告訴你使用的時候有哪些要注意的地方。

怎么使用 ref 訪問 DOM 元素

1. 使用 createRef 創(chuàng)建 ref

import React, { createRef } from 'react';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        // 創(chuàng)建一個 ref 對象，用來存儲 DOM 元素的引用
        this.myRef = createRef();
    }

    componentDidMount() {
        // 在組件掛載完成后，通過 ref 對象訪問 DOM 元素
        // 這里可以對這個 DOM 元素進行各種操作，比如修改樣式
        this.myRef.current.style.color = 'red';
    }

    render() {
        return (
            // 將 ref 對象綁定到一個 DOM 元素上
            <div ref={this.myRef}>
                這是一個使用 ref 訪問的 DOM 元素
            </div>
        );
    }
}

export default MyComponent;

在上面的代碼里，我們首先用 createRef 創(chuàng)建了一個 ref 對象 this.myRef。然后在 render 方法里，把這個 ref 對象綁定到了一個 <div> 元素上。當組件掛載完成后，在 componentDidMount 方法里，我們就可以通過 this.myRef.current 來訪問這個 <div> 元素，并且對它進行樣式修改。

2. 使用 useRef Hook（函數(shù)組件）

import React, { useRef } from 'react';

const MyFunctionComponent = () => {
    // 使用 useRef 創(chuàng)建一個 ref 對象
    const myRef = useRef(null);

    const handleClick = () => {
        // 點擊按鈕時，通過 ref 對象訪問 DOM 元素并修改它的文本內(nèi)容
        myRef.current.textContent = '文本內(nèi)容已修改';
    };

    return (
        <div>
            {/* 將 ref 對象綁定到一個 DOM 元素上 */}
            <p ref={myRef}>這是一個使用 ref 訪問的 DOM 元素</p>
            <button onClick={handleClick}>點擊修改文本</button>
        </div>
    );
};

export default MyFunctionComponent;

在函數(shù)組件里，我們用 useRef 來創(chuàng)建 ref 對象。然后把這個 ref 對象綁定到一個 <p> 元素上。當點擊按鈕時，通過 myRef.current 訪問這個 <p> 元素并修改它的文本內(nèi)容。

怎么使用 ref 訪問組件實例

類組件

import React, { createRef } from 'react';

// 定義一個子組件
class ChildComponent extends React.Component {
    showMessage() {
        // 子組件的方法，用于顯示消息
        alert('這是子組件的消息');
    }

    render() {
        return <div>子組件</div>;
    }
}

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        // 創(chuàng)建一個 ref 對象，用來存儲子組件實例的引用
        this.childRef = createRef();
    }

    handleClick = () => {
        // 點擊按鈕時，通過 ref 對象訪問子組件實例并調(diào)用它的方法
        this.childRef.current.showMessage();
    };

    render() {
        return (
            <div>
                {/* 將 ref 對象綁定到子組件上 */}
                <ChildComponent ref={this.childRef} />
                <button onClick={this.handleClick}>點擊調(diào)用子組件方法</button>
            </div>
        );
    }
}

export default ParentComponent;

在這個例子中，我們定義了一個子組件 ChildComponent，它有一個 showMessage 方法。在父組件 ParentComponent 里，我們創(chuàng)建了一個 ref 對象 this.childRef，并把它綁定到子組件上。當點擊按鈕時，通過 this.childRef.current 訪問子組件實例并調(diào)用它的 showMessage 方法。

使用 ref 的注意事項

ref 在組件掛載完成后才可用：在 componentDidMount 或者 useEffect 里使用 ref 是比較安全的，因為這時組件已經(jīng)掛載完成，ref 對象的 current 屬性才會指向?qū)嶋H的 DOM 元素或者組件實例。

不要在 render 方法里修改 ref 指向的元素或?qū)嵗簉ender 方法是用來描述 UI 的，不應(yīng)該在里面進行副作用操作，比如修改 DOM 元素的屬性。修改操作應(yīng)該放在生命周期方法或者 useEffect 里。

函數(shù)組件默認不支持 ref：如果要在函數(shù)組件里使用 ref，可以使用 forwardRef 來轉(zhuǎn)發(fā) ref。例如：

import React, { forwardRef } from 'react';

const MyFunctionComponentWithRef = forwardRef((props, ref) => {
    return <div ref={ref}>這是一個支持 ref 的函數(shù)組件</div>;
});

export default MyFunctionComponentWithRef;

這樣，就可以把 ref 傳遞給函數(shù)組件了。

通過上面的介紹，你應(yīng)該對 React 里怎么使用 ref 有了更清楚的認識，同時也知道了使用時的注意事項。希望這些內(nèi)容能幫助你更好地使用 React 開發(fā)項目！

React創(chuàng)建ref

除了createRef，React中還有哪些方法可以創(chuàng)建ref？

在 React 里，除了 createRef 之外，還有其他方法能創(chuàng)建 ref，下面為你詳細介紹：

1. 回調(diào) ref

回調(diào) ref 是通過給 ref 屬性傳入一個函數(shù)來創(chuàng)建的。這個函數(shù)會在組件掛載或卸載時被調(diào)用。在組件掛載時，函數(shù)會接收 DOM 元素或組件實例作為參數(shù)；在組件卸載時，函數(shù)會接收 null 作為參數(shù)。

下面是一個使用回調(diào) ref 的示例：

import React from 'react';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        // 初始化一個屬性來存儲 ref
        this.myRef = null;
        // 定義一個回調(diào)函數(shù)，用于接收 ref
        this.setMyRef = (element) => {
            this.myRef = element;
            if (this.myRef) {
                // 當 ref 可用時，可以對元素進行操作
                this.myRef.style.color = 'blue';
            }
        };
    }

    render() {
        return (
            // 使用回調(diào)函數(shù)作為 ref 屬性
            <div ref={this.setMyRef}>
                這是使用回調(diào) ref 訪問的 DOM 元素
            </div>
        );
    }
}

export default MyComponent;

在上述代碼中，this.setMyRef 是一個回調(diào)函數(shù)，當 <div> 元素掛載時，該函數(shù)會接收這個 <div> 元素作為參數(shù)，并將其賦值給 this.myRef。之后，就可以通過 this.myRef 來訪問這個 DOM 元素了。

2. useRef Hook（用于函數(shù)組件）

useRef 是 React 為函數(shù)組件提供的一個 Hook，它可以用來創(chuàng)建一個可變的 ref 對象。這個對象在組件的整個生命周期內(nèi)保持不變。

下面是一個使用 useRef 的示例：

import React, { useRef } from 'react';

const MyFunctionComponent = () => {
    // 使用 useRef 創(chuàng)建一個 ref 對象
    const myRef = useRef(null);

    const handleClick = () => {
        if (myRef.current) {
            // 點擊按鈕時，通過 ref 對象訪問 DOM 元素并修改它的文本內(nèi)容
            myRef.current.textContent = '文本內(nèi)容已更新';
        }
    };

    return (
        <div>
            {/* 將 ref 對象綁定到一個 DOM 元素上 */}
            <p ref={myRef}>這是使用 useRef 訪問的 DOM 元素</p>
            <button onClick={handleClick}>點擊更新文本</button>
        </div>
    );
};

export default MyFunctionComponent;

在這個函數(shù)組件中，useRef 創(chuàng)建了一個 ref 對象 myRef。當點擊按鈕時，通過 myRef.current 訪問 <p> 元素并修改其文本內(nèi)容。

3. forwardRef 結(jié)合 useImperativeHandle（用于函數(shù)組件轉(zhuǎn)發(fā) ref）

forwardRef 允許函數(shù)組件接收 ref 并將其轉(zhuǎn)發(fā)給子元素，而 useImperativeHandle 可以自定義暴露給父組件的 ref 實例值。

下面是一個使用 forwardRef 和 useImperativeHandle 的示例：

import React, { forwardRef, useRef, useImperativeHandle } from 'react';

// 使用 forwardRef 轉(zhuǎn)發(fā) ref
const ChildComponent = forwardRef((props, ref) => {
    const inputRef = useRef();
    // 使用 useImperativeHandle 自定義暴露給父組件的 ref 實例值
    useImperativeHandle(ref, () => ({
        focusInput: () => {
            inputRef.current.focus();
        }
    }));

    return <input ref={inputRef} type="text" />;
});

const ParentComponent = () => {
    const childRef = useRef();

    const handleClick = () => {
        // 調(diào)用子組件暴露的方法
        childRef.current.focusInput();
    };

    return (
        <div>
            <ChildComponent ref={childRef} />
            <button onClick={handleClick}>聚焦輸入框</button>
        </div>
    );
};

export default ParentComponent;

在這個例子中，ChildComponent 是一個函數(shù)組件，通過 forwardRef 接收 ref 并轉(zhuǎn)發(fā)給 <input> 元素。useImperativeHandle 自定義了暴露給父組件的 ref 實例值，這里暴露了一個 focusInput 方法。在 ParentComponent 中，通過 childRef 調(diào)用子組件暴露的 focusInput 方法，實現(xiàn)聚焦輸入框的功能。

React ref操作DOM元素屬性和方法

在React中，如何使用ref來操作DOM元素的屬性和方法？

在 React 里，借助 ref 能夠直接操作 DOM 元素的屬性與方法。下面會結(jié)合不同類型的組件（類組件和函數(shù)組件），為你詳細闡述使用 ref 操作 DOM 元素屬性和方法的具體方式。

類組件中使用 createRef

createRef 是類組件創(chuàng)建 ref 的常用手段。下面是一個示例，展示了怎樣使用 createRef 來操作 DOM 元素的屬性和方法：

import React, { createRef } from 'react';

class MyClassComponent extends React.Component {
    constructor(props) {
        super(props);
        // 創(chuàng)建一個 ref 對象
        this.myRef = createRef();
    }

    componentDidMount() {
        // 在組件掛載完成后，操作 DOM 元素的屬性和方法
        // 修改元素的文本內(nèi)容
        this.myRef.current.textContent = '文本內(nèi)容已更新';
        // 修改元素的樣式屬性
        this.myRef.current.style.color = 'red';
        // 調(diào)用元素的方法，這里讓元素獲得焦點
        this.myRef.current.focus();
    }

    render() {
        return (
            // 將 ref 對象綁定到 input 元素上
            <input type="text" ref={this.myRef} />
        );
    }
}

export default MyClassComponent;

componentDidMount 方法里，借助 this.myRef.current 操作 <input> 元素的屬性（如 textContent、style.color）和方法（如 focus）。

函數(shù)組件中使用 useRef

useRef 是函數(shù)組件創(chuàng)建 ref 的主要方式。以下示例展示了如何在函數(shù)組件里使用 useRef 操作 DOM 元素的屬性和方法：

import React, { useRef, useEffect } from 'react';

const MyFunctionComponent = () => {
    // 使用 useRef 創(chuàng)建一個 ref 對象
    const myRef = useRef(null);

    useEffect(() => {
        // 在組件掛載完成后，操作 DOM 元素的屬性和方法
        // 修改元素的文本內(nèi)容
        myRef.current.textContent = '文本內(nèi)容已更新';
        // 修改元素的樣式屬性
        myRef.current.style.color = 'blue';
        // 調(diào)用元素的方法，這里讓元素獲得焦點
        myRef.current.focus();
    }, []);

    return (
        // 將 ref 對象綁定到 input 元素上
        <input type="text" ref={myRef} />
    );
};

export default MyFunctionComponent;

在這個函數(shù)組件中，使用 useRef 創(chuàng)建了 myRef。然后在 useEffect 鉤子中，當組件掛載完成后，通過 myRef.current 操作 <input> 元素的屬性和方法。

注意事項

ref 在組件掛載后才可用：要確保在組件掛載完成后再操作 ref，因為只有在組件掛載后，ref 的 current 屬性才會指向?qū)嶋H的 DOM 元素。

避免在 render 方法中修改 ref：render 方法應(yīng)當是純函數(shù)，不適合進行副作用操作，如修改 DOM 元素的屬性。副作用操作建議放在 componentDidMount 或 useEffect 中。

在React中，ref和refs的原理及區(qū)別

在 React 里，ref 和 refs 在用途和原理上存在明顯差異，下面為你詳細介紹：

ref 的原理與使用

原理

ref 是 React 提供的一種機制，用于獲取 DOM 元素或者組件實例的引用。借助 ref，可以直接操作 DOM 元素，像修改樣式、獲取元素尺寸，或者調(diào)用組件實例的方法。在 React 中，ref 本質(zhì)上是一個對象，在組件掛載時，ref 對象的 current 屬性會指向?qū)?yīng)的 DOM 元素或者組件實例；組件卸載時，current 屬性會被設(shè)置為 null。

使用方式

類組件使用 createRef

import React, { createRef } from 'react';

class MyClassComponent extends React.Component {
    constructor(props) {
        super(props);
        // 創(chuàng)建一個 ref 對象
        this.myRef = createRef();
    }

    componentDidMount() {
        // 在組件掛載后，通過 ref 對象的 current 屬性訪問 DOM 元素
        if (this.myRef.current) {
            this.myRef.current.style.color = 'red';
        }
    }

    render() {
        return (
            // 將 ref 對象綁定到 DOM 元素上
            <div ref={this.myRef}>
                這是使用 createRef 創(chuàng)建的 ref
            </div>
        );
    }
}

export default MyClassComponent;

函數(shù)組件使用 useRef

import React, { useRef } from 'react';

const MyFunctionComponent = () => {
    // 使用 useRef 創(chuàng)建一個 ref 對象
    const myRef = useRef(null);

    const handleClick = () => {
        if (myRef.current) {
            // 通過 ref 對象的 current 屬性訪問 DOM 元素
            myRef.current.textContent = '內(nèi)容已更新';
        }
    };

    return (
        <div>
            <p ref={myRef}>這是使用 useRef 創(chuàng)建的 ref</p>
            <button onClick={handleClick}>點擊更新內(nèi)容</button>
        </div>
    );
};

export default MyFunctionComponent;

refs 的原理與使用（舊版本）

原理

在 React 舊版本里，refs 是一個對象，可用于存儲多個 ref。一般會使用字符串形式的 ref 來創(chuàng)建 refs 對象，不過這種方式現(xiàn)已不推薦使用，因為它存在一些問題，比如不利于代碼優(yōu)化、難以進行靜態(tài)分析等。

使用方式

import React from 'react';

class OldStyleComponent extends React.Component {
    handleClick = () => {
        // 通過 refs 對象訪問 DOM 元素
        if (this.refs.myElement) {
            this.refs.myElement.style.color = 'blue';
        }
    };

    render() {
        return (
            <div>
                {/* 使用字符串形式的 ref */}
                <div ref="myElement">這是使用舊版本 refs 的元素</div>
                <button onClick={this.handleClick}>點擊改變顏色</button>
            </div>
        );
    }
}

export default OldStyleComponent;

兩者的區(qū)別

使用方式

ref 既可以用 createRef（類組件）或者 useRef（函數(shù)組件）來創(chuàng)建，也可以使用回調(diào) ref；而舊版本的 refs 是通過字符串形式的 ref 來創(chuàng)建的。
兼容性與推薦度

ref 是 React 官方推薦的方式，兼容所有 React 版本，并且在代碼優(yōu)化和靜態(tài)分析方面表現(xiàn)更好；refs（字符串形式的 ref）是舊版本的用法，現(xiàn)已不推薦使用，在 React 16.3 及以后版本中，若使用字符串形式的 ref，控制臺會給出警告信息。

功能特性

ref 可以使用 forwardRef 和 useImperativeHandle 來實現(xiàn) ref 的轉(zhuǎn)發(fā)和自定義暴露；refs（字符串形式的 ref）沒有這些功能。
綜上所述，在新的 React 項目中，建議使用 ref 而不是舊版本的 refs。

以上就是React使用ref進行訪問DOM元素或組件的詳細內(nèi)容，更多關(guān)于React ref訪問DOM的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • React中項目路由配置與跳轉(zhuǎn)方法詳解

    React中項目路由配置與跳轉(zhuǎn)方法詳解

    這篇文章主要為大家詳細介紹了React中項目路由配置與跳轉(zhuǎn)方法的相關(guān)資料，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以了解一下
    2023-08-08
  • react項目升級報錯,babel報錯,.babelrc配置兼容等問題及解決

    react項目升級報錯,babel報錯,.babelrc配置兼容等問題及解決

    這篇文章主要介紹了react項目升級報錯,babel報錯,.babelrc配置兼容等問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • React+EggJs實現(xiàn)斷點續(xù)傳的示例代碼

    React+EggJs實現(xiàn)斷點續(xù)傳的示例代碼

    這篇文章主要介紹了React+EggJs實現(xiàn)斷點續(xù)傳的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07
  • react中使用swiper的具體方法

    react中使用swiper的具體方法

    本篇文章主要介紹了react中使用swiper的具體方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • React學習筆記之事件處理（二）

    React學習筆記之事件處理（二）

    這篇文章主要跟大家介紹了關(guān)于React中事件處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習React具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。
    2017-07-07
  • React 路由傳參的幾種實現(xiàn)方法

    React 路由傳參的幾種實現(xiàn)方法

    React中傳參方式有很多,通過路由傳參的方式也是必不可少的一種,本文主要介紹了React路由傳參的幾種實現(xiàn)方法,具有一定的參考價值,感興趣的可以了解一下
    2023-12-12
  • react+antd動態(tài)增刪表單方式

    react+antd動態(tài)增刪表單方式

    這篇文章主要介紹了react+antd動態(tài)增刪表單方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • react嵌套路由實現(xiàn)TabBar的實現(xiàn)

    react嵌套路由實現(xiàn)TabBar的實現(xiàn)

    本文主要介紹了react嵌套路由實現(xiàn)TabBar的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-08-08
  • React?component.forceUpdate()強制重新渲染方式

    React?component.forceUpdate()強制重新渲染方式

    這篇文章主要介紹了React?component.forceUpdate()強制重新渲染方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • ReactNative之鍵盤Keyboard的彈出與消失示例

    ReactNative之鍵盤Keyboard的彈出與消失示例

    本篇文章主要介紹了ReactNative之鍵盤Keyboard的彈出與消失示例，具有一定的參考價值，有興趣的可以了解一下
    2017-07-07

最新評論