React 父子组件怎么通信？

Question

React 父子组件怎么通信？

仓乃文 · Accepted Answer

React 父子组件通信有固定模式：父到子用 props，子到父用回调函数，跨多层级用 Context。父到子：Props 传递： ```javascript function Child({ name, age, onClick }) { return

{name} - {age}

; } function Parent() { const handleClick = () => console.log("点击了"); return ; } ``` 子到父：通过回调函数： ```javascript function Child({ onData }) { return ; } function Parent() { const receiveData = (data) => console.log(data); return ; } ``` 跨层级通信：useContext： ```javascript const ThemeContext = createContext("light"); function Child() { const theme = useContext(ThemeContext); return

主题：{theme}

; } function Parent() { return ( ); } ``` 补充说明： - props 只能父到子单向传递 - 回调函数是子到父通信的标准方式 - Context 适合「全局状态」如主题、用户信息、语言设置 - 避免用 Context 做频繁更新的状态，性能开销大