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

更新時間：2024年10月28日 10:25:46 作者：算是難了

React知識中一個主要內(nèi)容便是組件之間的通信,以下列舉幾種常用的組件通信方式,通過代碼示例介紹的非常詳細(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ù)來與父組件進行交互。

示例

// 子組件
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 進行類型檢查。

示例

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ù)與父組件進行交互。
默認(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ù)來修改上下文的值。

以上就是React中組件通信的幾種主要方式的詳細(xì)內(nèi)容，更多關(guān)于React組件通信方式的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

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

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)容

常用在線小工具

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

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機制跨層級組件通信:

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