济南国画网站建设投资公司经营范围

济南国画网站建设,投资公司经营范围,wordpress版权修改,建站之星怎么用前言你有没有过这种崩溃时刻#xff1f;写 React 组件时#xff0c;想让父子组件互通数据#xff0c;结果代码越写越乱#xff1b;兄弟组件想传个值#xff0c;绕了八层父组件还没搞定…… 为啥别人的 React 组件传值丝滑#xff1f;别慌#xff01;秘密都在这#xff…前言你有没有过这种崩溃时刻写React 组件时想让父子组件互通数据结果代码越写越乱兄弟组件想传个值绕了八层父组件还没搞定…… 为啥别人的 React 组件传值丝滑别慌秘密都在这今天咱们用「武侠传功」的思路React 组件通讯的坑一篇帮你填平一、父子组件父传子的「单向秘籍」想象一下父组件是武林盟主手里有本《九阴真经》变量想传给子组件这个小徒弟。但规矩是徒弟只能看不能改传功步骤父组件发功在子组件标签上绑定属性把秘籍递出去子组件接功通过props接收双手接住秘籍看个例子父组件盟主把state.name传给子组件// 父组件 Parent.jsx import Child from ./Child; export default function Parent(props) { const state { name: henry // 这是要传的「秘籍」 }; return ( div h2父组件/h2 Child msg {state.name}/ {/* 绑定属性 msg把秘籍递出去 */} /div ); }子组件徒弟用props接收但不能修改秘籍是只读的// 子组件 Child.jsx export default function Child(props) { console.log(props); // 能看到 {msg: henry} // props.msg harvest; // ❌ 报错props 是只读的不能改 return ( {/* 展示接收到的「秘籍」 */} div子组件 -- {props.msg}/div ); }打印结果如下如果修改值会报错只读不能改二、子父组件子传父的「反向传功」这次反过来子组件是徒弟练出了新招式变量想传给父组件盟主。但徒弟不能直接塞给盟主得让盟主递个「接收袋」函数徒弟把招式装进去。传功步骤父组件递袋定义接收数据的函数准备好接收袋父传子袋把函数通过props传给子组件把袋子递过去子组件装招调用函数并传数据把新招式装进袋子代码例子父组件准备「接收袋」getNum传给子组件// 父组件 Parent.jsx import Child from ./Child import { useState } from react; export default function Parent() { let [count, setCount] useState(1); // 定义「接收袋」收到数据后更新自己的状态 const getNum (n) { setCount(n); } return ( div h2父组件二 -- {count}/h2 Child getNum {getNum}/ {/* 把袋子递过去 */} /div ); }子组件调用getNum把自己的state.num传过去// 子组件 Child.jsx export default function Child(props) { const state { num: 100 // 自己练的新招式 }; function send() { props.getNum(state.num); // 把新招式装进袋子 } return ( div h3子组件二/h3 button onClick{send}发送/button {/* 点按钮传功 */} /div ) }点击发送前点击发送后这样我们就成功的把子组件的变量传给了父组件。这里我们用到了useState至于它的作用我们暂时先不讲我们先搞懂通讯。三、兄弟组件「父组件当中间商」兄弟组件像两个师兄弟想互相传功得先把招式传给盟主父组件中间商再让父组件转给另一个兄弟。传功步骤弟 1 传父弟 1 把数据传给父组件父传弟 2父组件把数据传给弟 2依旧代码父组件当中间商接收 Child1 的数据再传给 Child2// 父组件 Parent.jsx import { useState } from react; import Child1 from ./Child1 import Child2 from ./Child2 export default function Parent(props) { let [message, setMessage] useState(); // 接收 Child1 的数据 const getMeg (msg) { setMessage(msg); } return ( div h2父组件三/h2 Child1 getMeg {getMeg} / {/* 收 Child1 的数据 */} Child2 msg {message}/ {/* 把数据传给 Child2 */} /div ) }Child1兄传数据给父// Child1.jsx export default function Child1(props) { const state { msg: 3.1 }; function send() { props.getMeg(state.msg); // 传给父组件 } return ( div h3子组件3.1/h3 button onClick{send}发送/button /div ) }Child2弟接收父组件传来的数据// Child2.jsx export default function Child2(props) { return ( div h3子组件3.2 -- {props.msg}/h3 {/* 展示兄传来的数据 */} /div ) }发送前发送后如此这般子组件3.2就成功接收到了子组件3.1的传递信息。四、跨组件通信「Context 全局广播」如果组件嵌套了好多层比如父→子→孙→重孙一层层传功太麻烦了这时候用Context就像「武林广播」父组件把数据广播出去所有后代组件都能直接收到。广播步骤父组件建广播台用createContext创建上下文对象用 Provider广播数据后代组件收广播用useContext接收广播的内容还是代码父组件建广播台广播「父组件的数据」// 父组件 Parent.jsx import Child1 from ./Child1; import { createContext } from react; // 创建上下文对象广播台 export const Context createContext() export default function Parent() { return ( div h2父组件四/h2 {/* 用 Provider 广播数据value 是要传的内容 */} Context.Provider value{父组件的数据} Child1/ /Context.Provider /div ); }孙组件直接收广播不用经过子组件// 孙组件 Child2.jsx import { useContext } from react import { Context } from ./Parent // 引入广播台 export default function Child2() { const msg useContext(Context) // 直接接收广播内容 return ( div h4孙子组件 --- {msg}/h4 {/* 展示广播的内容 */} /div ); }另外附上子组件代码import Child2 from ./Child2 export default function Child1() { return ( div h3子组件/h3 Child2/ /div ); }结果孙子组件成功得到父组件的数据五、温馨提示别忘了App.jsx和main.jsx文件前面的所有结果都需要这两个大佬的支持。// App.jsx // import Parent from ./demo1/Parent // import Parent from ./demo2/Parent // import Parent from ./demo3/Parent import Parent from ./demo4/Parent export default function App() { return ( Parent/Parent ) }// main.jsx import { createRoot } from react-dom/client import App from ./App.jsx createRoot(document.getElementById(root)).render( App / )这两份是创建React自带的但是还是提醒一下大家别忘了六、总结组件通讯「武功谱」通讯场景方法核心思路父子组件props 传值父传子子只读子父组件props 传函数父给函数子调用传数据兄弟组件父组件中转子→父→另一个子跨组件Context上下文父广播后代直接收结语其实React 组件通讯的核心从来都不是死记硬背步骤而是找准数据的流向。父子传值用props单向传递子父传值借函数反向搭桥兄弟组件靠父组件当 “中转站”跨层级通信就用Context打破嵌套壁垒。这些方法没有优劣之分只有场景之别。新手阶段先把props和函数传值练熟再逐步尝试Context甚至后续学习的Redux 等状态管理库都是在这个基础上的延伸。记住组件通讯的本质就是让数据在合适的组件间有序流动。现在就打开编辑器把这些例子敲一遍你会发现那些曾经让你头疼的传值问题早就迎刃而解了。