react 笔记，组件之间的传参

父子组件传参

父组件直接在子组件上放置属性，子组件在参数中获取参数，多个参数会变成对象属性，如果组件中嵌套结构，子组件获取参数时可以获取到一个children，多个结构数组形式

 <A    name='小明'   age='18'/>// 组件A  假装已经在父组件中引用   传参可以是任意类型数据
 
 //组件代码
 function   A(props){
 console.log(props)   //   {name:'小明',  age:'18'}
 return  <div>{props.name  +  props.age}</div>
 }
 
 
 //  ======  组件中嵌套结构 
 <A>
     <span> 1 </span>
     <span> 2 </span>
 </A>
 
 
 function   A(props){
 console.log(props)   //   {children:[结构1,结构2]}
 return  <div>{props.children[0]}</div>
 }

兄弟组件传参 逻辑 子=>父=>子 （传说中的状态提升.. 各种名词 ...强行提咖） 没啥特别要记的不写了这块

跨组件通信 （大概是爷爷要给孙子传参这样）

createContext 来自react

关键字 ** ** createContext('可以放初始值') useContext(create出来的名称) **
create出来的名称.Provider是一个标签 包裹住需要传参的 子孙组件**

//  逻辑   父组件  嵌套  A组件   A组件嵌套B组件    父组件给B组件传参
  import  {createContext,useState}  from 'react'
  
  let   MsgContext  =   createContext('初始值') 
  
   function  A(){
   return  <div>  <B/> </div>
   }
   
   function  B(){
           console.log(  useContext(MsgContext))//   初始信息 
   }
  
  let  [msg,setMssg]  =    useState('初始信息')
  <父组件>
      <MsgContext.Provider  value={msg}>
          <A/>
      </MsgContext.Provider>
  </父组件>