1、父子传参（props）
parent.js

import React, { Component } from 'react'
import Son from './son'

export class index extends Component {
  constructor() {
    super();
    this.state = {
      list: [
        { id: 0, value: 'red' },
        { id: 1, value: 'green' },
        { id: 2, value: 'orange' },
      ],
      color: 'red'
    }
  }
  changeValue = (e) => {
    this.setState({ color: e.target.value })
  }
  render () {
    let { list, color } = this.state
    return (
      <div className='group'>
        <p>index page</p>
        <select value={color} onChange={this.changeValue}>
          {
            list.map(item => (
              <option key={item.id}>{item.value}</option>
            ))
          }
        </select>
        <hr />
        <Son color={color} />
      </div>
    )
  }
}
export default index

son.js

import React, { Component } from 'react'
import PropsTypes from 'prop-types'

export class son extends Component {
  constructor(props) {
    super();
    this.state = {
      name: '小张',
      age: '8',
      parName: props.name,
      parAge: props.age
    }
  }
  handleChange = (e) => {
    this.setState({ parName: e.target.value });
    this.props.parentChange(e.target.value)
  }
  render () {
    let { name, age, parName, parAge } = this.state;
    // 或者
    let { name: pName, age: pAge, color } = this.props;
    return (
      <div>
        <p>son page</p>
        <div>
          <p>姓名：{name}</p>
          <p>年龄：{age}</p>
        </div>
        <p>父组件传入(方法一)</p>
        <div>
          <p>姓名：{parName}</p>
          <p>年龄：{parAge}</p>
        </div>
        <p>父组件传入(方法二)</p>
        <div>
          <p>姓名：{pName}</p>
          <p>年龄：{pAge}</p>
        </div>
        <div>
          <input type='text' value={parName} onChange={this.handleChange} />
          <button style={{ color: color }}>{color}</button>
        </div>
      </div>
    )
  }
}
son.propsTypes = {
  name: PropsTypes.string.isRequired //isRequired必传值
}
son.defaultProps = {
  name: '李四',
  age: 30
}
export default son

image.png

2、上下文传参(context)
context.js

import React from "react";
const MainContext = React.createContext()
export default MainContext

index.js

import React, { Component } from 'react'
import Parent from './parent'
import MainContext from './context'
export class index extends Component {
  constructor() {
    super();
  }

  render () {

    return (
      <div className='group'>
        <h3>上下文传参(祖孙传参 context)</h3>
        index
        <MainContext.Provider value='casey'>
          <Parent />
        </MainContext.Provider>

      </div>
    )
  }
}

export default index

paren.js

import React, { Component } from 'react'
import Son from './son'
import MainContext from './context'
export class parent extends Component {
  static contextType = MainContext
  constructor() {
    super();
  }
  render () {
    return (
      <div>
        <p>parent page</p>
        {this.context}
        <Son />
      </div>
    )
  }
}
export default parent

son.js

import React, { Component } from 'react'
import MainContext from './context'
export class son extends Component {
  static contextType = MainContext
  constructor() {
    super();
  }
  render () {
    return (
      <div>
        <p>son page</p>
        {this.context}
        <MainContext.Consumer>
          {
            context => {
              console.log(context)
              return (
                <div>{context}</div>
              )
            }
          }
        </MainContext.Consumer>
      </div>
    )
  }
}
export default son

image.png

3、兄弟组件传参(eventBus)
eventBus.js

import { EventEmitter } from 'events'
const eventBus = new EventEmitter
export default eventBus

header.js

import React, { Component } from 'react'
import eventBus from './eventBus'
export class Header extends Component {
    send = () => {
        let name = "张三"
        let arr = [1, 2, 3, 4, 5]
        eventBus.emit('sayHellow', name, arr)
    }
    render () {
        return (
            <div>
                <p>Header page</p>
                <button onClick={this.send}>发送</button>
            </div>
        )
    }
}

export default Header

footer.js

import React, { Component } from 'react'
import eventBus from './eventBus'
export class Footer extends Component {
    constructor() {
        super();
        this.state = {
            name: '',
            list: []
        }
    }
    componentDidMount () {
        eventBus.addListener('sayHellow', this.sayHellowList)
    }
    sayHellowList = (a, b) => {
        this.setState({ name: a, list: b })
        console.log(a, b)
    }
    componentWillUnmount () {
        eventBus.removeListener('sayHellow', this.sayHellowList)
    }
    render () {
        let { name, list } = this.state
        return (
            <div>
                <p>Footer page</p>
                {
                    name && <p>姓名：{name}</p>
                }
                {
                    list &&
                    <ul>
                        {list.map(item => (<li key={item}>{item}</li>))}
                    </ul>
                }
            </div>
        )
    }
}

export default Footer

image.png