React 组件通信

父向子传值:

父组件:
import { Component} from "react"
import styles from "./parent.module.css"
import Child from "./child"
 export default class Parent extends Component{
  constructor(){
    super()
    this.state={
      data:"我是父组件传过来的数据"
    }
  }
 
  render(){
    const {data} = this.state
    return(
      <div className={styles.parent}>
       <div className={styles.title}>
        <div>父组件</div>
      </div>
       <Child data={data}/>
      </div>
    )
  }
 }

子组件：
import { Component } from "react"
import styles from "./child.module.css"
 export default class Child extends Component{
 
  render(){
    const { data } = this.props
    return(
      <div>
       <div className={styles.title}>子组件</div>
       <div>{data}</div>
      </div>
    )
  }
 }

子向父传值

父组件:
import { Component} from "react"
import styles from "./parent.module.css"
import Child from "./child"
 export default class Parent extends Component{
  constructor(){
    super()
    this.state={
      data:"父组件传的数据"
    }
  }
 changeData=(e)=>{
  this.setState({
    data:e
  })
 }
  render(){
    const {data} = this.state
    return(
      <div >
       <div className={styles.parent}>
        <div className={styles.title}>父组件</div>
        <div>{data}</div>
       </div>
       <Child data={data} changeValue={(e)=>this.changeData(e)}/>
      </div>
    )
  }
 }

子组件：
import { Component } from "react"
import styles from "./child.module.css"
import PropTypes  from "prop-types"
 export default class Child extends Component{
  
 handleChange= () =>{
    this.props.changeValue("子组件修改的值")
  }
  render(){
    const { data } = this.props
    return(
      <div>
       <div className={styles.title}>子组件</div>
       <div>{data}</div>
       <button onClick={()=>this.handleChange()}>修改父组件的数据</button>
      </div>
    )
  }
 }
 Child.propTypes={
  data:PropTypes.string
 }

插槽

第一种方式 children实现

父组件：
import { Component} from "react"
import styles from "./parent.module.css"
import Child from "./child"
 export default class Parent extends Component{
  
  render(){
    return(
      <div >
       <div className={styles.parent}>
        <div className={styles.title}>父组件</div>
       </div>
       <Child>
        <div>插槽左边</div>
        <div>插槽中间</div>
        <div>插槽右边</div>
       </Child>
      </div>
    )
  }
 }

子组件：
import { Component } from "react"
import styles from "./child.module.css"
import PropTypes  from "prop-types"
 export default class Child extends Component{
  render(){
    const {children} = this.props
    return(
   
      <div>
      <div className={styles.title}>子组件</div>
       <div className={styles.content}>
        <div>{children[0]}</div>
        <div>{children[1]}</div>
        <div>{children[2]}</div>
       </div>
      </div>
    )
  }
 }
 Child.propTypes ={
  left: PropTypes.object,
  center: PropTypes.object,
  right: PropTypes.object,
 }

第二种方式 props实现

父组件：
import { Component} from "react"
import styles from "./parent.module.css"
import Child from "./child"
 export default class Parent extends Component{
  render(){
    const left = <div>左边</div>
    const center = <div>中间</div>
    const right = <div>右边</div>
    return(
      <div >
       <div className={styles.parent}>
        <div className={styles.title}>父组件</div>
       </div>
       <Child left={left} center={center} right={right}></Child>
      </div>
    )
  }
 }

子组件：
import { Component } from "react"
import styles from "./child.module.css"
import PropTypes  from "prop-types"
 export default class Child extends Component{
  render(){
    const {left,center,right} = this.props
    return(
      <div>
      <div className={styles.title}>子组件</div>
       <div className={styles.content}>
        <div>{left}</div>
        <div>{center}</div>
        <div>{right}</div>
       </div>
      </div>
    )
  }
 }
 Child.propTypes ={
  left: PropTypes.object,
  center: PropTypes.object,
  right: PropTypes.object,
 }

非父子组件通信

爷孙组件:context实现（类组件和函数式组件）

import React from "react";

export const MyContext = React.createContext()

父组件：
import { Component,createContext} from "react"
import styles from "./parent.module.css"
import Child from "./child"
// export const MyContext = createContext();
import { MyContext } from "./MyContext"
 export default class Parent extends Component{
  render(){
    return(
      <div className={styles.parent}>
       <div className={styles.title}>
        <div>父组件</div>
      </div>
      <MyContext.Provider value={{data:"爷组件传过来的值"}}>
       <Child />
      </MyContext.Provider>
      </div>
    )
  }
 }

孙组件（类组件）使用Sun.contextType = MyContext
import { Component } from "react"
import { MyContext } from "./MyContext";
import styles from "./sun.module.css"
 export default class Sun extends Component{
  render(){
 console.log(this);
    const {data} = this.context
    return(
      <div>
       <div className={styles.title}>孙组件</div>
       <div>{data}</div>
      </div>
    )
  }
 }
 Sun.contextType = MyContext

孙组件（函数组件）使用const value = useContext(MyContext)
import { Component,useContext } from "react"
import { MyContext } from "./MyContext"
import styles from "./sun.module.css"
export default function Sun (){
  const value = useContext(MyContext)
    return(
      <div>
       <div className={styles.title}>孙组件</div>
       <div>{value.data}</div>
      </div>
    )
 }

兄弟组件:事件总线实现（events）

import { EventEmitter } from "events"
export const eventsBus = new EventEmitter()

子组件1
import { Component } from "react"
import styles from "./child.module.css"
import { eventsBus } from "./events"
 export default class Child1 extends Component{
 
  handleEmit(){
    eventsBus.emit("send","兄弟传的数据")
  }
  render(){
    return(
      <div>
       <div className={styles.title}>子1组件</div>
       <button onClick={()=>this.handleEmit()}>兄弟之间传递数据</button>
      </div>
    )
  }
 }

子组件2
import { Component } from "react"
import styles from "./child.module.css"
import { eventsBus } from "./events"
 export default class Child2 extends Component{
  constructor(){
    super()
    this.state={
      data:null
    }
  }
 componentDidMount(){
  eventsBus.addListener("send",this.handleAcceptData)
 }
 handleAcceptData=(e)=>{
  console.log(e);
  this.setState({
    data:e
  })
 }
  render(){
    const { data } = this.state
    return(
      <div>
       <div className={styles.title}>子2组件</div>
       <div>{data}</div>
      </div>
    )
  }
 }

https://www.yuque.com/docs/share/ec3f8328-6a16-4ed7-a4aa-2392f338bfd6?# 《组件通信》