react组件间通信

1.父组件向子组件通信

import {  useState } from 'react';
function Button(props){
  return(
    <div>{props.name}</div>
  )
}
function App() {
  const msg=useState('神雕侠侣')
  return (
    <div className="App">
      <Button name={msg}></Button>
    </div>
  );
}

export default App;

2.子组件向父组件通信

import {  useState } from 'react';
function Button({getsonData}){
  const msg='这是子组件传过来的'
  return(
    <div>
      {getsonData && <button  onClick={()=>{getsonData(msg) }}>子传父</button>}
    
    </div>
  )
}
function App() {
  const [msg,setMsg]=useState('')
  const getsonData=(msg)=>{
    console.log('msg',msg)
    setMsg(msg)
  }
  return (
    <div className="App">
      <Button  getsonData={getsonData}> </Button>
      <div>{msg}</div>
    </div>
  );
}

export default App;

3.context机制跨层传递数据 

 

 

  <msgContext.Provider value={msg}>
      这是主页面
     <A></A>
  </msgContext.Provider>   必须用value

import { createContext, useContext } from 'react';
// 1.createContext创建一个上下文对象
const msgContext=createContext()
function A(){
  return(
    <div>
      这是A组件
    <B></B>
    </div>
  )
}
function B(){
  const msg=useContext(msgContext)
  return(
    // 3.在底层组件通过useContext钩子函数使用数据
    <div>
    这是B组件{msg}
    </div>
  )
}
function App() {
const msg='this is msg'
  return (
    // 2.在顶层组件通过provider创建数据
    <div className="App" >
      <msgContext.Provider value={msg}>
      这是主页面
     <A></A>
      </msgContext.Provider>
    
    </div>
  );
}

export default App;