react父子组件传值

父传子–通过props接收，不能修改props的值，props可以设置默认值函数组件直接在传参时写默认值，类组件在组件内定义static defaultProps设置props默认值

插槽使用props.chidren就能接受到父组件传递的html标签内容

function father() {
  let list = 'zhangsan'
  return (
    <>
    	//index 就为props传的给SonF的chidren值也可以传递<div></div>
        <SonF>index</SonF>
    </>
  )
}

prop传递校验借用第三方包propTypes–也可直接使用TS

SonF.PropTypes = {
	list: PropTypes.String//设置list为string类型
}

function father() {
  let list = 'zhangsan'
  return (
    <>
        <SonF list={list}>index</SonF>
	    <SonC list={list}>index</SonC>
    </>
  )
}

//函数子组件
function SonF(props) {
  return (
    <>
	    <div>函数子组件</div>
	    <div>{props.list}</div>
    </>
  )
}

//类子组件
class SonC extends Component {
  render() {
	return (
    <>
	    <div>类子组件</div>
	    <div>{this.props.list}</div>
    </>
	)
  }
}

子传父

import React, { Component, useState } from 'react'

function Father() {
  let [list, setList] = useState('zhangsan')
  let getSonList1 = (value)=>{
  	console.log(value,'子组件传递的值')
  }
  return (
    <>
      <SonF getSonList={(e)=>getSonList1(e)}>index</SonF>
	    <SonC getSonList={(e)=>getSonList1(e)}>index</SonC>
    </>
  )
}

//函数子组件
function SonF(props) {
  let [listSon, setListSon] = useState('zhangsanSon')
  return (
    <>
	    <div>函数子组件</div>
	    <div onClick={()=>{props.getSonList(listSon)}}>传值给父组件</div>
    </>
  )
}

//类子组件
class SonC extends Component {
  state = {
    listSon:"张三"
  }
  render() {
	return (
    <>
	    <div>类子组件</div>
	    <div>{this.props.list}</div>
	    <div onClick={()=>{this.props.getSonList(this.state.listSon)}}>传值给父组件</div>
    </>
	)
  }
}

兄弟传值–通过父组件传递–SonF传递数据给Father再由Father传递给SonC

function Father() {
  let [list, setList] = useState('zhangsan')
  let getSonList1 = (value)=>{
  	setList(value)
  }
  return (
    <>
      <SonF getSonList={(e)=>getSonList1(e)}>index</SonF>
	    <SonC list={list}>index</SonC>
    </>
  )
}

//函数子组件
function SonF(props) {
  let [listSon, setListSon] = useState('zhangsanSon')
  return (
    <>
	    <div>函数子组件</div>
	    <div onClick={()=>{props.getSonList(listSon)}}>传值给父组件</div>
    </>
  )
}

//类子组件
class SonC extends Component {
  state = {
    listSon:"张三"
  }
  render() {
	return (
    <>
	    <div>类子组件</div>
	    <div>{this.props.list}</div>
    </>
	)
  }
}

兄弟传值–使用events进行传递，emit进行传值，on进行接收

import React, { Component, useState } from 'react'

import {EventEmitter} from 'events'

const bus = new EventEmitter()

function Father() {
  return (
    <>
      <SonF>index</SonF>
	  <SonC>index</SonC>
    </>
  )
}

//函数子组件
function SonF() {
  let transfer = ()=>{
    bus.emit('SonfValue',{
      value:"zhagnsanSonF"
    })
  }
  return (
    <>
	    <div>函数子组件</div>
	    <div onClick={()=>{transfer()}}>传值给兄弟组件</div>
    </>
  )
}

//类子组件
class SonC extends Component {
  state = {
    listSon:"张三"
  }
  componentDidMount(){
    //接收brother2传来的值
    bus.on('SonfValue',data=>{
        this.setState({listSon:data.value})
    })
  }
  render() {
	return (
    <>
	    <div>类子组件</div>
	    <div>{this.state.listSon}</div>
    </>
	)
  }
}

父组件传递子孙组价–prop层层传递或者使用context-若组件不在一个文件内需把context提到一个js文件中，需要时引入

import React, { Component, createContext, useContext } from 'react'

let context = createContext()

function Father() {
  let value = 'fater'
  return (
    <context.Provider value={value}>
      <SonF>index</SonF>
    </context.Provider>
  )
}

//函数子组件
function SonF() {
  const contextSon = useContext(context)
  return (
    <>
      <div>{contextSon}</div>
      <SonC></SonC>
    </>
  )
}

//类子组件
class SonC extends Component {
  render() {
    return (
      <context.Consumer>
        {
          (value) => {
            return <>
              <div>孙子组件</div>
              <div>{value}</div>
            </>
          }
        }
      </context.Consumer>
    )
  }
}