react学习day5

1.父组件传递数据给子组件 props

import React, { useRef, useState } from 'react';
import './App.css'
function Son(props){
  console.log(props)
  return <div>this is son { props.name}
    {props.children}
  </div>
}
function App() {
  const name='this is app name'
  return (
    <div>
      <Son 
        name={name}
        age={18}
        isTrue={false}
        list={['vue','react']}
        obj={{name:'jack'}}
        cb={()=>console.log(123)}
        child={<span>span</span>}
      >
        <span>children</span>
      </Son>
    </div>
  );
}
export default App;

1.子组件传递数据给父组件，调用父组件的函数，并把参数传过去

import React, { useRef, useState } from 'react';
import './App.css'
function Son({onGetMsg}){
  return <div>this is son
    <button onClick={()=>onGetMsg('test son')}>send</button>
  </div>
}

function App() {
  const [msg,setMsg] =useState('')
  const getMsg=(msg)=>{
    console.log(msg)
    setMsg(msg)
  }
  return (
    <div>
      {msg}
      <Son onGetMsg={getMsg}/>
    </div>
  );
}
export default App;

3.兄弟组件间通信，借助父组件，状态提升

import React, { useRef, useState } from 'react';
import './App.css'
function A({onGetMsg}){
  const name='a msg'
  return (<div>A component
    <button onClick={()=>onGetMsg(name)}>send</button>
  </div>)
}
function B({name}){
  return <div>B component {name}</div>
}

function App() {
 const [name,setName]=useState('')
 const getMsg=(name)=>{
  setName(name)
 }
  return (
    <div>
      <A onGetMsg={getMsg}/>
      <B name={name}/>
    </div>
  );
}
export default App;

4.顶层和底层数据通信,createContext

import React, { createContext, useContext, useRef, useState } from 'react';
import './App.css'
const msgContext=createContext('')

function A(){
  const name='a msg'
  return (<div>A component
   <B></B>
  </div>)
}
function B(){
  const msg=useContext(msgContext)
  return <div>B component {msg}</div>
}

function App() {
const msg='info'
  return (
    <div>
      root
      <msgContext.Provider value={msg}>
        <A />
      </msgContext.Provider>
    </div>
  );
}
export default App;