注意：使用的是UI庫是 antd-mobile

1.父子級組件通信

• 父組件
• 單向數據流：數據從父組件流向子組件。
• 支持多種數據類型：字符串、數字、對象、數組、函數等。
• 只讀性：子組件不能直接修改 props 中的數據。

import { useState } from 'react'
import YdNavbar1 from './components/Ydnavbar1'
function App() {const [right, setRight] = useState('操作')const handleDataFromChild = (data) => {setRight(data)}return (<><YdNavbar1 rightMsg={right} onSendData={handleDataFromChild}></YdNavbar1></>)
}export default App

• 子組件
• 子組件通過props接收父組件傳遞的函數，然后調用該函數并傳遞參數給父組件
• 反向通信：通過回調函數實現子組件向父組件傳遞數據。
• 事件驅動：通常與 onClick、onChange 等事件結合使用。

import '../App.css'
import { Toast, Space, NavBar } from 'antd-mobile'// 父傳子：子組件通過props接收父組件傳參(rightMsg)
const YdNavbar1 = ({ rightMsg, onSendData }) => {// 子傳父：子組件通過props接收父組件傳遞的函數(onSendData)，然后調用該函數并傳遞參數給父組件const handleClick = () => {Toast.show({content: '提示',afterClose: () => {onSendData('兒子的問候')},})}return (<><div className="App"><Space style={{ width: '100vw' }} direction="vertical"><NavBar right={rightMsg} onBack={handleClick}>導航欄</NavBar></Space></div></>)
}export default YdNavbar1

2.通過Ref調用子組件方法

• 父組件
• 使用 useRef（父組件調用子組件方法）
• 直接調用子組件方法：適用于需要父組件控制子組件行為的場景。

import { useState } from 'react'
import YdNavbar2 from './components/Ydnavbar2'
// 使用 useRef（父組件調用子組件方法）
import { useRef } from 'react'
function App() {const childRef = useRef(null)const callChildMethod = () => {childRef.current.sayHello()}return (<><YdNavbar2 ref={childRef}></YdNavbar2></>)
}export default App

• 子組件
• 需顯式暴露方法：子組件必須通過 useImperativeHandle 暴露方法。

import '../App.css'
import { Space, NavBar } from 'antd-mobile'
import { useImperativeHandle, forwardRef } from 'react'
// props 是必須的：當使用 forwardRef 時，組件的函數參數必須包含 props 和 ref，即使沒有使用 props
// 通過 forwardRef 包裹組件
const YdNavbar2 = forwardRef((props, ref) => {// 使用 useImperativeHandle 暴露給父組件方法（sayHello）useImperativeHandle(ref, () => ({sayHello: () => {console.log('使用ref調用子組件方法')},}))return (<><div className="App"><Space style={{ width: '100vw' }} direction="vertical"><NavBar>導航欄</NavBar></Space></div></>)
})export default YdNavbar2

3.使用 Context API（跨層級共享數據）

• 在src目錄創建文件夾 contexts 創建 MyContext.js?文件，再創建 MyContextProvider.jsx 文件，如圖

• MyContext.js

import { createContext } from 'react'// 可以創建多個 Context 對象
const MyContext = createContext()export default MyContext

• MyContextProvider.jsx

import { useState } from 'react'
import MyContext from './MyContext'function MyProvider({ children }) {const [leftMsg, setLeftMsg] = useState('左邊')return (<MyContext.Provider value={{ leftMsg, setLeftMsg }}>{children}</MyContext.Provider>)
}
export default MyProvider

• 組件1

import { useState } from 'react'
import YdNavbar3 from './components/Ydnavbar3'
// 使用 Context API（跨層級共享數據）
import MyProvider from './contexts/MyContextProvider'
function App() {return (<><MyProvider><YdNavbar3></YdNavbar3></MyProvider></>)
}export default App

• 組件2

import '../App.css'
import { Toast, Space, NavBar } from 'antd-mobile'
// 使用 Context API（跨層級共享數據）
import { useContext } from 'react'
// 引用上下文對象
import MyContext from '../contexts/MyContext'const YdNavbar1 = () => {const { leftMsg, setLeftMsg } = useContext(MyContext)return (<><div className="App"><Space style={{ width: '100vw' }} direction="vertical"><NavBar left={leftMsg} onBack={() => setLeftMsg('哈哈哈')}>導航欄</NavBar></Space></div></>)
}export default YdNavbar1

4.使用 Zustand 狀態管理

• 首先安裝?Zustand

npm i zustand

• 在 src 下創建 stores 文件夾，創建文件 useStore.js 文件

// stores/userStore.js
import { create } from 'zustand'const useUserStore = create((set) => ({user: null, // 初始狀態setUser: (user) => set({ user }), // 修改用戶的方法
}))export default useUserStore

• 組件使用方法

import { useState } from 'react'
import { Button, Space } from 'antd-mobile'
// 使用 Zustand 狀態管理
import useUserStore from './stores/userStore'
function App() {const { user, setUser } = useUserStore() // 獲取狀態和方法return (<><div>{user}</div><Button onClick={() => (user ? setUser(null) : setUser('132456'))}>改變用戶</Button></>)
}export default App