会vue，学习react组件父子通信

react子传父，与父传子通信方法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

import { useState } from "react";   // 组件传参 props是父组件传过来的所以数据，props也是和vue一样的不能修改 const SonComponent = (props) => {   return (     <div>       <h1>{props.title}</h1>       <button onClick={()=>{props.cb() }}>点击{props.count}</button>       {props.element}     </div>   ); }; // 当内容嵌套在子组件标签内时，可以使用props.children获取到内容 const SonComponent2 = (props) => {   return (     <div>       {props.children}     </div>   ); };     // 解构子组件传过来的方法 const SonComponent3= ({onGetMsg,count}) => {   const msg=count===0?'999':0   return (     <div>       <button onClick={()=>{onGetMsg(msg)}}>点击</button>     </div>   ); };       function App() {    const title="hello world";        const [count,setCount]=useState(0);   return (     <div className="App">        {/*父传子案例  */}       <SonComponent       title={title}       count={count}       cb={()=>{ alert('父组件方法')}}       element={ <div>123</div>}       />         <SonComponent2>         <h2>类似于vue插槽</h2>       </SonComponent2>         {/* 子传父案例 */}       <h3>{count}</h3>       <SonComponent3 onGetMsg={(e)=> setCount(e)} count={count}/>         </div>   ); }   export default App;