欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2025年09月04日 09:52:54   作者：自信的飛  
本文主要介紹了詳解React 中組件通信的幾種主要方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、父?jìng)髯樱?/h2>

1. 傳遞多個(gè)屬性

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

示例

// 子組件
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)用這個(gè)函數(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 驗(yàn)證

使用 prop-types 庫可以對(duì)傳遞給子組件的 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. 傳遞對(duì)象和數(shù)組

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

示例:

子組件向父組件傳遞數(shù)據(jù)的主要方式是通過回調(diào)函數(shù)。父組件將一個(gè)函數(shù)作為 props 傳遞給子組件，子組件在需要時(shí)調(diào)用這個(gè)函數(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é)：

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

二、子傳父：

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

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ù)給父組件，通常用于處理用戶輸入或按鈕點(diǎn)擊。

示例

// 父組件
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. 傳遞多個(gè)參數(shù)

子組件也可以通過回調(diào)函數(shù)傳遞多個(gè)參數(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ù)，如用戶輸入。
  • 多個(gè)參數(shù): 子組件可以通過回調(diào)函數(shù)傳遞多個(gè)參數(shù)給父組件。

三、使用Context機(jī)制跨層級(jí)組件通信:

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

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

import React, { createContext } from 'react';

// 創(chuàng)建上下文對(duì)象
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.底層組件消費(fèi)數(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

相關(guān)文章

  • react項(xiàng)目從新建到部署的實(shí)現(xiàn)示例

    react項(xiàng)目從新建到部署的實(shí)現(xiàn)示例

    這篇文章主要介紹了react項(xiàng)目從新建到部署的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02
  • React中引入less、less-loader問題

    React中引入less、less-loader問題

    這篇文章主要介紹了React中引入less、less-loader問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • react中實(shí)現(xiàn)拖拽排序react-dnd功能

    react中實(shí)現(xiàn)拖拽排序react-dnd功能

    這篇文章主要介紹了react中實(shí)現(xiàn)拖拽排序react-dnd功能,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-02-02
  • React深入分析useEffect源碼

    React深入分析useEffect源碼

    useEffect是react?v16.8新引入的特性。我們可以把useEffect?hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個(gè)函數(shù)的組合
    2022-11-11
  • React?Native性能優(yōu)化指南及問題小結(jié)

    React?Native性能優(yōu)化指南及問題小結(jié)

    本文將介紹在React?Native開發(fā)中常見的性能優(yōu)化問題和解決方案,包括ScrollView內(nèi)無法滑動(dòng)、熱更新導(dǎo)致的文件引用問題、高度獲取、強(qiáng)制橫屏UI適配、低版本RN適配iOS14、緩存清理、navigation參數(shù)取值等,感興趣的朋友一起看看吧
    2024-01-01
  • React如何立即更新DOM

    React如何立即更新DOM

    這篇文章主要介紹了React如何立即更新DOM問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • JavaScript的React框架中的JSX語法學(xué)習(xí)入門教程

    JavaScript的React框架中的JSX語法學(xué)習(xí)入門教程

    這篇文章主要介紹了JavaScript的React框架中的JSX語法學(xué)習(xí)入門教程,React是由Facebook開發(fā)并開源的高人氣js框架,需要的朋友可以參考下
    2016-03-03
  • React styled-components設(shè)置組件屬性的方法

    React styled-components設(shè)置組件屬性的方法

    這篇文章主要介紹了styled-components設(shè)置組件屬性的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-08-08
  • React?+?Typescript領(lǐng)域初學(xué)者的常見問題和技巧(最新)

    React?+?Typescript領(lǐng)域初學(xué)者的常見問題和技巧(最新)

    這篇文章主要介紹了React?+?Typescript領(lǐng)域初學(xué)者的常見問題和技巧,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2022-06-06
  • react中braft-editor的基本使用方式

    react中braft-editor的基本使用方式

    這篇文章主要介紹了react中braft-editor的基本使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-09-09

最新評(píng)論