React每日学习计划-组件之间的通信 — 父子组件传值

React每日学习计划第1周 · 组件开发核心 今日日期2026年4月9日 · 星期四 今日主题组件之间的通信 — 父子组件传值一、核心知识点1. 为什么需要组件通信React是单向数据流的框架数据只能从父组件流向子组件。这不是限制而是设计原则让应用的数据流向清晰可追溯。通信类型实现方式类比理解父→子Props传递父母给孩子零花钱子→父回调函数Props传递函数孩子向父母汇报成绩跨级通信Context / Redux家族长老传话2. 父组件向子组件传值Props这是最基础也是最常用的方式。就像给函数传参数一样自然。// 父组件 function Parent() { const message 来自父组件的问候; return ; } // 子组件接收 function Child(props) { return ( div h1{props.title}/h1 p数字是{props.count}/p /div ); }3. 子组件向父组件传值回调函数这是新手最容易困惑的地方。记住子组件不能直接修改父组件的state只能通过调用父组件传递过来的函数来通知父组件。// 父组件 - 定义函数通过props传递给子组件 function Parent() { const [inputValue, setInputValue] useState(); // 这是父组件的函数会被子组件调用 const handleChildData (data) { console.log(收到子组件的数据, data); setInputValue(data); }; return ( div p父组件收到的值{inputValue}/p Child onDataChange{handleChildData} / /div ); } // 子组件 - 调用父组件传来的函数 function Child({ onDataChange }) { const handleClick () { // 调用父组件的函数把数据传上去 onDataChange(子组件的数据); }; return button onClick{handleClick}点我告诉父组件/button; }⚠️ 常见错误提醒直接在子组件修改props— Props是只读的修改会报错忘记在父组件绑定this— 类组件中回调函数需要 .bind(this) 或使用箭头函数混淆props和state— props是外部传入的state是组件内部自己管理的二、今日实战练习 练习一计数器父子组件协作场景开发一个简单的计数器功能父组件显示总数子组件负责加减操作。要求父组件CounterDisplay显示当前计数子组件CounterControls有 1 和 -1 两个按钮点击按钮父组件的计数要更新代码模板import React, { useState } from react; // 父组件显示计数 function CounterDisplay() { const [count, setCount] useState(0); // TODO: 补全代码定义 handleIncrement 和 handleDecrement 函数 // 并传递给 CounterControls 组件 return ( div style{{ textAlign: center, padding: 20px }} h2当前计数{count}/h2 {/* TODO: 在这里渲染 CounterControls 组件 */}/div ); } // 子组件控制按钮 function CounterControls({ onIncrement, onDecrement }) { return ( div {/* TODO: 添加两个按钮分别调用 onIncrement 和 onDecrement */}/div ); } export default CounterDisplay; 练习二表单提交子传父数据场景子组件是输入框和提交按钮父组件负责显示提交的内容。要求子组件SearchForm有输入框和搜索按钮父组件SearchResult显示搜索结果输入内容点击搜索后父组件显示正在搜索xxximport React, { useState } from react; function SearchResult() { const [keyword, setKeyword] useState(); // TODO: 定义 handleSearch 函数接收子组件传来的搜索词 return ( div h2搜索结果页面/h2 {/* TODO: 渲染 SearchForm 组件传入 handleSearch */}/div ); } function SearchForm({ onSearch }) { const [input, setInput] useState(); const handleSubmit () { // TODO: 调用 onSearch 回调把 input 的值传给父组件 }; return ( div input value{input} onChange{(e) setInput(e.target.value)} placeholder输入搜索关键词 / button onClick{handleSubmit}搜索/button /div ); }三、参考答案✅ 练习一答案import React, { useState } from react; // 父组件显示计数 function CounterDisplay() { const [count, setCount] useState(0); // 定义传递给子组件的回调函数 const handleIncrement () setCount(count 1); const handleDecrement () setCount(count - 1); return ( div style{{ textAlign: center, padding: 20px }} h2当前计数{count}/h2 CounterControls onIncrement{handleIncrement} onDecrement{handleDecrement} / /div ); } // 子组件控制按钮 function CounterControls({ onIncrement, onDecrement }) { return ( div button onClick{onDecrement} style{{ marginRight: 10px }} -1 /button button onClick{onIncrement} 1 /button /div ); } export default CounterDisplay; 思路讲解父组件用useState管理计数状态父组件定义两个函数用箭头函数自动绑定不需要担心 this 问题通过 props 把函数传递给子组件函数名起得有意义如onIncrement表示当增加时子组件只负责调用这些函数不管理任何状态受控组件✅ 练习二答案import React, { useState } from react; function SearchResult() { const [keyword, setKeyword] useState(); // 接收子组件传来的搜索词 const handleSearch (searchTerm) { setKeyword(searchTerm); }; return ( div h2搜索结果页面/h2 SearchForm onSearch{handleSearch} / {keyword p正在搜索{keyword}/p} /div ); } function SearchForm({ onSearch }) { const [input, setInput] useState(); const handleSubmit () { if (input.trim()) { onSearch(input); // 把数据传给父组件 } }; return ( div input value{input} onChange{(e) setInput(e.target.value)} placeholder输入搜索关键词 / button onClick{handleSubmit}搜索/button /div ); } export default SearchResult; 思路讲解子组件维护自己的input状态局部状态点击搜索时调用父组件传来的onSearch把搜索词传上去父组件更新自己的keyword状态触发重新渲染显示结果这就是React中自下而上传递数据的标准方式四、动手指南打开CodeSandbox访问 codesandbox.io/s/react-new 创建一个新项目粘贴模板代码把上面的练习模板复制进去补全 TODO 部分先自己思考实在写不出来再看答案尝试扩展给计数器添加重置按钮给搜索添加防抖等学了 useEffect 再回来优化