react父子组件传值

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

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

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

        index
    
  )
}

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

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

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

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

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

子传父

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

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

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

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

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

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

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

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

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

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

import {EventEmitter} from 'events'

const bus = new EventEmitter()

function Father() {
  return (
    <>
      index
	  index
    
  )
}

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

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

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

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

let context = createContext()

function Father() {
  let value = 'fater'
  return (
    
      index
    
  )
}

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

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