---

---

在React開發中，組件間的通信是一個核心概念。雖然React的數據流是單向的（從父組件流向子組件），但在實際開發中，我們經常需要將子組件的數據或狀態變化傳遞給父組件。本文將詳細介紹React中實現子傳父通信的幾種方法。

為什么需要子傳父通信？

在實際開發中，子傳父通信的場景非常常見：

• 表單輸入框的值需要傳遞給父組件處理
• 子組件的用戶操作需要影響父組件的狀態
• 列表項的刪除、編輯操作需要通知父組件更新數據
• 模態框、彈窗的顯示/隱藏狀態控制

方法一：回調函數（最常用）

這是最經典也是最常用的方法。父組件定義一個函數，通過props傳遞給子組件，子組件在需要時調用這個函數。

基礎示例

// 父組件
function ParentComponent() {const [message, setMessage] = useState('');const handleChildMessage = (childData) => {setMessage(childData);console.log('收到子組件消息:', childData);};return (<div><h2>父組件</h2><p>來自子組件的消息: {message}</p><ChildComponent onSendMessage={handleChildMessage} /></div>);
}// 子組件
function ChildComponent({ onSendMessage }) {const [inputValue, setInputValue] = useState('');const handleSubmit = () => {if (inputValue.trim()) {onSendMessage(inputValue);setInputValue('');}};return (<div><h3>子組件</h3><inputtype="text"value={inputValue}onChange={(e) => setInputValue(e.target.value)}placeholder="輸入消息"/><button onClick={handleSubmit}>發送給父組件</button></div>);
}

實際場景：待辦事項列表

// 父組件 - 待辦事項管理
function TodoApp() {const [todos, setTodos] = useState([{ id: 1, text: '學習React', completed: false },{ id: 2, text: '寫技術博客', completed: false }]);const handleToggleTodo = (id) => {setTodos(todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo));};const handleDeleteTodo = (id) => {setTodos(todos.filter(todo => todo.id !== id));};return (<div><h1>待辦事項</h1>{todos.map(todo => (<TodoItemkey={todo.id}todo={todo}onToggle={handleToggleTodo}onDelete={handleDeleteTodo}/>))}</div>);
}// 子組件 - 單個待辦事項
function TodoItem({ todo, onToggle, onDelete }) {return (<div style={{ padding: '10px', border: '1px solid #ccc', margin: '5px 0',textDecoration: todo.completed ? 'line-through' : 'none'}}><span>{todo.text}</span><button onClick={() => onToggle(todo.id)}>{todo.completed ? '取消完成' : '標記完成'}</button><button onClick={() => onDelete(todo.id)}>刪除</button></div>);
}

方法二：使用useRef傳遞引用

當需要直接訪問子組件的方法或屬性時，可以使用useRef和forwardRef。

import { useRef, forwardRef, useImperativeHandle } from 'react';// 子組件使用forwardRef
const ChildComponent = forwardRef((props, ref) => {const [count, setCount] = useState(0);useImperativeHandle(ref, () => ({getCount: () => count,resetCount: () => setCount(0),incrementCount: () => setCount(prev => prev + 1)}));return (<div><p>計數: {count}</p><button onClick={() => setCount(prev => prev + 1)}>增加</button></div>);
});// 父組件
function ParentComponent() {const childRef = useRef();const handleGetChildData = () => {const childCount = childRef.current.getCount();alert(`子組件當前計數: ${childCount}`);};const handleResetChild = () => {childRef.current.resetCount();};return (<div><ChildComponent ref={childRef} /><button onClick={handleGetChildData}>獲取子組件數據</button><button onClick={handleResetChild}>重置子組件</button></div>);
}

方法三：Context API（跨層級通信）

當組件層級較深時，使用Context API可以避免props逐層傳遞的問題。

import { createContext, useContext, useState } from 'react';// 創建Context
const DataContext = createContext();// 提供者組件
function DataProvider({ children }) {const [sharedData, setSharedData] = useState('');const updateData = (newData) => {setSharedData(newData);};return (<DataContext.Provider value={{ sharedData, updateData }}>{children}</DataContext.Provider>);
}// 父組件
function ParentComponent() {const { sharedData } = useContext(DataContext);return (<div><h2>父組件</h2><p>共享數據: {sharedData}</p><MiddleComponent /></div>);
}// 中間組件
function MiddleComponent() {return (<div><h3>中間組件</h3><DeepChildComponent /></div>);
}// 深層子組件
function DeepChildComponent() {const { updateData } = useContext(DataContext);const [inputValue, setInputValue] = useState('');const handleSubmit = () => {updateData(inputValue);setInputValue('');};return (<div><h4>深層子組件</h4><inputtype="text"value={inputValue}onChange={(e) => setInputValue(e.target.value)}/><button onClick={handleSubmit}>更新共享數據</button></div>);
}// 應用根組件
function App() {return (<DataProvider><ParentComponent /></DataProvider>);
}

方法四：自定義Hook（狀態邏輯復用）

將通信邏輯封裝到自定義Hook中，便于復用和管理。

// 自定義Hook
function useParentChildCommunication(initialValue = '') {const [value, setValue] = useState(initialValue);const updateValue = (newValue) => {setValue(newValue);};return [value, updateValue];
}// 父組件
function ParentComponent() {const [childMessage, setChildMessage] = useParentChildCommunication('');return (<div><h2>父組件</h2><p>子組件消息: {childMessage}</p><ChildComponent onMessage={setChildMessage} /></div>);
}// 子組件
function ChildComponent({ onMessage }) {const [input, setInput] = useState('');const handleSend = () => {onMessage(input);setInput('');};return (<div><inputtype="text"value={input}onChange={(e) => setInput(e.target.value)}/><button onClick={handleSend}>發送</button></div>);
}

最佳實踐與注意事項

1. 回調函數命名規范

• 使用on前綴：onSubmit、onChange、onDelete
• 語義化命名：清楚表達函數的作用

2. 性能優化

使用useCallback優化回調函數，避免不必要的重渲染：

const handleChildMessage = useCallback((message) => {setMessage(message);
}, []);

3. TypeScript類型定義

interface ChildProps {onMessage: (message: string) => void;onDelete?: (id: number) => void;
}const ChildComponent: React.FC<ChildProps> = ({ onMessage, onDelete }) => {// 組件實現
};

4. 錯誤處理

在回調函數中添加適當的錯誤處理：

const handleChildData = (data) => {try {if (!data || typeof data !== 'string') {throw new Error('Invalid data format');}setParentData(data);} catch (error) {console.error('處理子組件數據時出錯:', error);}
};

選擇合適的方法

• 回調函數：最常用，適合簡單的父子通信
• useRef：需要直接訪問子組件方法時使用
• Context API：跨多層組件通信，避免props drilling
• 自定義Hook：需要復用通信邏輯時使用