欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

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

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

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

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

父子組件通信

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

父到子通信

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

通過 props ，可以把數據從父組件傳遞到子組件。

這時候傳遞到子組件的數據是只讀的。

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 給子組件。

這種父到子的數據傳遞，類似于函數調用時候的參數傳遞。

子到父通信

子組件到父組件的數據傳遞，還是通過 props 實現的。

依然是通過 props 從父組件向子組件先傳遞，不同的是傳遞是回調函數，而不是具體的數據。

因為數據在子組件是不能修改的，但回調函數則可以傳遞信息回去在父組件執行。

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}>發送消息</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; 

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

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

這樣的實現效果如下：

?

總結

最后來總結一下今天的內容要點：

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