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机制跨层传递数据

 

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;

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;