React—组件通信

一、父传子（Props）

父组件可以通过 props 将数据传递给子组件。这是 React 中最常见的一种方式，适用于父子组件之间的数据传递。

　　　 {/* 组件传递：父传子 */}
      {/* 1.父组件传递数据 子组件标签上绑定属性 */}
      {/* 2.子组件接收数据 props(props对象里包含了父组件传递过来的所有数据)的参数 */}
      {/* （1）props可以传递任意数据 */}
      {/* （2）props是只读对象，不能修改，父组件的数据只能父组件修改 */}
　　　 const name='我是要传递给子组件的数据'
      <div className="father">
        我是父组件，父传子
        <Son
          name={name}
          age={18}
          isTrue={true}
          list={[1, 3, 6]}
          obj={{ net: 333 }}
          cb={() => {
            // console.log('callback')
          }}
          child={<span>4444</span>}
        >
          <button>children</button>
        </Son>
      </div>


function Son(props){
  // console.log(props)
  return <div>子组件,{props.name}{props.children}</div>
}

 

二、子传父（callback）

父组件将函数作为 props 传递给子组件，子组件可以通过调用该函数来将数据传递回父组件。这种方式适用于子组件向父组件传递数据或触发父组件中的操作。

 　　　{/* 组件传递：子传父 */}
      {/* 在子组件中调用父组件中的函数并传递实参 */}
      {/* 
        1.父组件中定义函数 （子组件调用并拿到子组件给的参数）
        2.子组件标签绑定方法 （子组件需要绑定父组件定义的函数）
        3.子组件调用父组件的方法传递数据 （父组件通过自己的函数拿到子组件的传递的数据）
      */}

 　　　　 const [msg,setMsg] = useState('')

  　　　　const getMsg = (msg)=>{

    　　　　// console.log('获取子组件传递的内容：',msg)

   　　　　 setMsg(msg)

  　　　　}

<div className="father">
        我是父组件，子传父：{msg}
        <Son2 onGetMsg={getMsg}></Son2>
      </div>


function Son2({onGetMsg}){
  // console.log(onGetMsg)
 const string = '子组件要向父组件传递的数据'
  return <div>子组件2 <button onClick={()=>{
    onGetMsg(string)
  }}>子传父</button></div>
}

 

三、兄弟组件（状态提升机制）

{/* 组件传递：兄弟组件通讯 */}
{/* 借助“状态提升”机制，通过父组件进行兄弟组件之间的数据传递 */}
{/* 
    1.A组件通过子传父的方式把数据传给父组件APP
    2.APP拿到数据后通过父传子的方式再传递给B组件
    A -> App -> B
 */}

  const [nameB,setNameB] = useState('')

  const getAName=(name)=>{

    console.log('A组件传递给父组件的参数：',name)

    setNameB(name)

  }

<div className="father">
     我是APP组件 (父组件) A-》APP-》B
     <A onGetName={getAName}></A>
     <B name={nameB}></B>
  </div>


 function A({onGetName}){
  const name ="我是A组件要传递的数据"
  return <div>
    我是A组件
    <button onClick={()=>{
      onGetName(name)
    }}>A send B</button>
  </div>
}
function B({name}){
  
  return <div>
    我是B组件,{name}
  </div>
}

 

四、跨层级组件（Context）

 {/* 组件传递：跨层通信（使用context机制跨层级组件通信） */}
 {/* 
    1.使用createContext方法创建一个上下文对象
    2.在顶级组件（APP）中通过Ctx.Provider组件提供数据
    3.在底层组件（D）中通过useContext钩子函数获取数据
  */}

　　const MsgAppContext = createContext()

   const msgApp = '跨层级传递数据'

<div className="father">
    <MsgAppContext.Provider value={msgApp}>
        我是APP组件 App-》D
        <C></C>
     </MsgAppContext.Provider>
   </div>

function C(){
  return <div>

    我是C组件
    <D></D>
  </div>
}
function D(){
 const msg= useContext(MsgAppContext)
  return <div>

    我是D组件,{msg}
  </div>
}