日韩欧美人妻无码精品白浆,www.大香蕉久久网,狠狠的日狠狠的操,日本好好热在线观看

?? 如果還不了解 HTML 、 CSS和JS，可以參考本號下的 HTML21 天入門教程、 CSS 21 天入門教程和JS21天入門教程。

React 開發(fā)是基于組件的，也就大功能會拆分成一個一個小功能，也就變成了一個個組件。

很自然的，組件之間就存在父子關(guān)系、兄弟關(guān)系及跨級關(guān)系三種。

今天來講父子組件之間的通信。

父子組件通信

父子組件之間的通信分成父到子、子到父兩種。

父到子通信

父組件到子組件的通信，在前面講屬性的時候提過。

通過 props ，可以把數(shù)據(jù)從父組件傳遞到子組件。

這時候傳遞到子組件的數(shù)據(jù)是只讀的。

import React from 'react';  function SayHello(props) {   return (     <div>       <h1>Hello, {props.name}!</h1>     </div>   ); }  export default SayHello; 

上面的 SayHello 組件是一個子組件，它接受來自父組件的屬性 name 。

import SayHello from './SayHello';  function App() {   return (     <SayHello name="World" /> }  export default App; 

在上面的父組件 App 中，傳入屬性 name 給子組件。

這種父到子的數(shù)據(jù)傳遞，類似于函數(shù)調(diào)用時候的參數(shù)傳遞。

子到父通信

子組件到父組件的數(shù)據(jù)傳遞，還是通過 props 實現(xiàn)的。

依然是通過 props 從父組件向子組件先傳遞，不同的是傳遞是回調(diào)函數(shù)，而不是具體的數(shù)據(jù)。

因為數(shù)據(jù)在子組件是不能修改的，但回調(diào)函數(shù)則可以傳遞信息回去在父組件執(zhí)行。

import React from 'react';  function SayHello(props) {   const sendMessage = () => {     const message = 'Hello from child!';     props.onMessage(message);   };    return (     <div>       <h1 style={{ color: 'blue', fontSzie: 22 }}>Hello, {props.name}!</h1>        <button onClick={sendMessage}>發(fā)送消息</button>     </div>   ); }  export default SayHello; 

修改上述子組件代碼，增加了一個按鈕。并且按鈕有點擊事件。

在點擊事件里，為 props 的 onMessage 方法傳遞了 message 信息。

import './App.css'; import SayHello from './SayHello'; import { useState } from 'react';  function App() {   const [msg, setMsg] = useState('');    const handleChildMessage = (message) => {     setMsg(message);     console.log('Received message from child:', message);   };   return (     <div>       <div>{msg}</div>       <SayHello name="World" onMessage={handleChildMessage} />     </div>   ); }  export default App; 

修改父組件代碼，在子組件的調(diào)用上，增加了剛才新添加的事件 onMessage 事件處理方法 handleChildMessage 。

在 handleChildMessage 方法，把接收到的 message 和頁面中 div 顯示的內(nèi)容綁定在一起。

這樣的實現(xiàn)效果如下：

?

總結(jié)

最后來總結(jié)一下今天的內(nèi)容要點：

• ?? 組件之間存在父子關(guān)系、兄弟關(guān)系及跨級關(guān)系三種。
• ?? 父子組件之間的通信分成父到子、子到父兩種。
• ?? 父子組件之間的通信由 props 傳遞完成。