詳解React 中組件通信的幾種主要方式

更新時間：2025年09月04日 09:52:54 作者：自信的飛

本文主要介紹了詳解React 中組件通信的幾種主要方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、父傳子：

1. 傳遞多個屬性

父組件可以通過 props 傳遞多個屬性給子組件。

示例

// 子組件
function Son(props) {
    return (
        <div>
            This is Son, {props.name} - Age: {props.age}
        </div>
    );    
}

// 父組件
function App() {
    const name = 'This is App Name';
    const age = 10;
    return (
        <div>
            <Son name={name} age={age} />
        </div>
    );
}

2. 傳遞函數(shù)作為 props

父組件可以將函數(shù)作為 props 傳遞給子組件，子組件可以調(diào)用這個函數(shù)來與父組件進(jìn)行交互。

示例

// 子組件
function Son(props) {
    const handleClick = () => {
        props.onButtonClick('Button clicked!');
    };

    return (
        <div>
            This is Son. 
            <button onClick={handleClick}>Click Me</button>
        </div>
    );    
}

// 父組件
function App() {
    const handleSonClick = (message) => {
        console.log(message);
    };

    return (
        <div>
            <Son onButtonClick={handleSonClick} />
        </div>
    );
}

3. 使用默認(rèn)值

為子組件的 props 設(shè)置默認(rèn)值，使用 defaultProps。

示例

// 子組件
function Son(props) {
    return <div>This is Son, {props.name}</div>;    
}

Son.defaultProps = {
    name: 'Default Name'
};

// 父組件
function App() {
    return (
        <div>
            <Son /> {/* 不傳遞 name 屬性 */}
        </div>
    );
}

4. PropTypes 驗證

使用 prop-types 庫可以對傳遞給子組件的 props 進(jìn)行類型檢查。

示例

import PropTypes from 'prop-types';

// 子組件
function Son(props) {
    return <div>This is Son, {props.name}</div>;    
}

Son.propTypes = {
    name: PropTypes.string.isRequired, // name 是必需的字符串
};

// 父組件
function App() {
    return (
        <div>
            <Son name="This is App Name" />
        </div>
    );
}

5. 傳遞對象和數(shù)組

父組件可以傳遞對象或數(shù)組作為 props，子組件可以直接使用。

示例:

子組件向父組件傳遞數(shù)據(jù)的主要方式是通過回調(diào)函數(shù)。父組件將一個函數(shù)作為 props 傳遞給子組件，子組件在需要時調(diào)用這個函數(shù)，并將數(shù)據(jù)作為參數(shù)傳遞給父組件。

// 子組件
function Son(props) {
    return (
        <div>
            This is Son, {props.data.name}, Age: {props.data.age}
        </div>
    );    
}

// 父組件
function App() {
    const user = { name: 'John', age: 25 };
    return (
        <div>
            <Son data={user} />
        </div>
    );
}

總結(jié)：

多屬性傳遞: 父組件可以傳遞多個屬性給子組件。
函數(shù)作為 props: 父組件可以將函數(shù)傳遞給子組件，子組件可以調(diào)用這個函數(shù)與父組件進(jìn)行交互。
默認(rèn)值和類型檢查: 可以通過 defaultProps 和 PropTypes 來確保 props 的完整性和正確性。
傳遞對象和數(shù)組: 可以將復(fù)雜的數(shù)據(jù)結(jié)構(gòu)（如對象和數(shù)組）作為 props 傳遞。

二、子傳父：

1.基本用法示例：

父組件

import React from 'react';
import Son from './Son';

function App() {
    const handleMessage = (msg) => {
        console.log("Received from Son:", msg);
    };

    return (
        <div>
            <h1>Parent Component</h1>
            <Son onSendMessage={handleMessage} />
        </div>
    );
}

export default App;

子組件

import React from 'react';

function Son(props) {
    const sendMessage = () => {
        props.onSendMessage("Hello from Son!");
    };

    return (
        <div>
            <h2>Child Component</h2>
            <button onClick={sendMessage}>Send Message to Parent</button>
        </div>
    );
}

export default Son;

2. 傳遞事件數(shù)據(jù)

子組件可以傳遞事件數(shù)據(jù)給父組件，通常用于處理用戶輸入或按鈕點擊。

示例

// 父組件
function App() {
    const handleInputChange = (inputValue) => {
        console.log("Input from Son:", inputValue);
    };

    return (
        <div>
            <h1>Parent Component</h1>
            <Son onInputChange={handleInputChange} />
        </div>
    );
}

// 子組件
function Son(props) {
    const handleChange = (event) => {
        props.onInputChange(event.target.value);
    };

    return (
        <div>
            <h2>Child Component</h2>
            <input type="text" onChange={handleChange} placeholder="Type something..." />
        </div>
    );
}

3. 傳遞多個參數(shù)

子組件也可以通過回調(diào)函數(shù)傳遞多個參數(shù)給父組件。

示例

// 父組件
function App() {
    const handleData = (name, age) => {
        console.log("Received from Son:", name, age);
    };

    return (
        <div>
            <h1>Parent Component</h1>
            <Son onSendData={handleData} />
        </div>
    );
}

// 子組件
function Son(props) {
    const sendData = () => {
        props.onSendData("John", 30);
    };

    return (
        <div>
            <h2>Child Component</h2>
            <button onClick={sendData}>Send Data to Parent</button>
        </div>
    );
}

總結(jié)：

回調(diào)函數(shù): 子組件通過調(diào)用父組件傳遞的回調(diào)函數(shù)來傳遞數(shù)據(jù)。
事件數(shù)據(jù)傳遞: 子組件可以通過回調(diào)函數(shù)向父組件傳遞事件數(shù)據(jù)，如用戶輸入。
多個參數(shù): 子組件可以通過回調(diào)函數(shù)傳遞多個參數(shù)給父組件。

三、使用Context機制跨層級組件通信:

App組件——A組件——B組件

1.創(chuàng)建上下文對象:在所有組件外部創(chuàng)建一個上下文對象

import React, { createContext } from 'react';

// 創(chuàng)建上下文對象
cosnt MsgContext = createContext()

2.頂層組件提供數(shù)據(jù):在頂層組件通過Provider組件提供數(shù)據(jù)

// App.js
import React, { useState } from 'react';
import MyContext from './MyContext';
import ComponentA from './ComponentA';

const App = () => {
    const [data, setValue] = useState("Hello from Context!");

    return (
        <MyContext.Provider value={{ data, setData }}>
            <h1>Top Level Component</h1>
            <A />
        </MyContext.Provider>
    );
};

export default App;

3.中間組件A組件(可選)

// ComponentA.js
import React from 'react';
import ComponentB from './ComponentB';

const ComponentA = () => {
    return (
        <div>
            <h2>Component A</h2>
            <B />
        </div>
    );
};

export default ComponentA;

4.底層組件消費數(shù)據(jù): 在底層組件中使用 useContext 鉤子獲取數(shù)據(jù)。

// ComponentB.js
import React, { useContext } from 'react';
import MyContext from './MyContext';

const ComponentB = () => {
    const { value, setValue } = useContext(MyContext); // 獲取上下文
    const changeValue = () => {
        setValue('update from B'); // 更新上下文值
    };

    return (
        <div>
            <h3>Component B</h3>
            <p>Data from Context: {data}</p>
            <button onClick={changeValue}>更新值</button>
        </div>
    );
};

export default ComponentB;

總結(jié)：

創(chuàng)建 Context: 使用 createContext 創(chuàng)建上下文。
提供 Context: 使用 Context.Provider 在頂層組件中提供數(shù)據(jù)。
使用 Context: 在子組件中使用 useContext 鉤子訪問上下文。
更新 Context: 子組件通過調(diào)用更新函數(shù)來修改上下文的值。

到此這篇關(guān)于詳解React 中組件通信的幾種主要方式的文章就介紹到這了,更多相關(guān)React 組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

詳解React 中組件通信的幾種主要方式

目錄

一、父傳子：

1. 傳遞多個屬性

2. 傳遞函數(shù)作為 props

3. 使用默認(rèn)值

4. PropTypes 驗證

5. 傳遞對象和數(shù)組

總結(jié)：

二、子傳父：

1.基本用法示例：

子組件

2. 傳遞事件數(shù)據(jù)

3. 傳遞多個參數(shù)

總結(jié)：

三、使用Context機制跨層級組件通信:

1.創(chuàng)建上下文對象:在所有組件外部創(chuàng)建一個上下文對象

2.頂層組件提供數(shù)據(jù):在頂層組件通過Provider組件提供數(shù)據(jù)

3.中間組件A組件(可選)

4.底層組件消費數(shù)據(jù): 在底層組件中使用 useContext 鉤子獲取數(shù)據(jù)。

總結(jié)：

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

詳解React 中組件通信的幾種主要方式

目錄

一、父傳子：

1. 傳遞多個屬性

2. 傳遞函數(shù)作為 props

3. 使用默認(rèn)值

4. PropTypes 驗證

5. 傳遞對象和數(shù)組

總結(jié)：

二、子傳父：

1.基本用法示例：

子組件

2. 傳遞事件數(shù)據(jù)

3. 傳遞多個參數(shù)

總結(jié)：

三、使用Context機制跨層級組件通信:

1.創(chuàng)建上下文對象:在所有組件外部創(chuàng)建一個上下文對象

2.頂層組件提供數(shù)據(jù):在頂層組件通過Provider組件提供數(shù)據(jù)

3.中間組件A組件(可選)

4.底層組件消費數(shù)據(jù): 在底層組件中使用 useContext 鉤子獲取數(shù)據(jù)。

總結(jié)：

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

二、子傳父：

三、使用Context機制跨層級組件通信: