React中的组件通讯

props的children属性

 

组件通讯-父传子

1. 父组件中的子组件标签上传值

 

 

 2. 给子组件标签添加属性，值为 state 中的数据

 

 

组件通讯-子传父

思路

利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。

步骤

1. 父组件

   1. 定义一个回调函数f（将会用于接收数据）

   2. 将该函数f作为属性的值，传递给子组件

2. 子组件

   1. 通过 props 获取f

   2. 调用f，并传入将子组件的数据

   父组件      

 

 子组件

 

 

组件通讯-兄弟组件 

思路

• 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

• 思想：状态提升

• 公共父组件职责：

  • 提供共享状态

  • 提供操作共享状态的方法

• 要通讯的子组件只需通过 props 接收状态或操作状态的方法

 

parent.js

 

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Jack from './Son1'
import Rose from './Son2'
class App extends Component {
  // 1. 状态提升到父组件
  state = {
    num: 0
  }

  Add = () => {
    this.setState({
      num: this.state.num + 1
    })
  }

  render () {
    return (
      <div>
        <h1>我是App组件</h1>
        <Jack Add={this.Add} />
        {/* 2. 把状态给子组件显示 */}
        <Rose num={this.state.num} />
      </div>
    )
  }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

Son1.js

/* eslint-disable react/prop-types */
import React, { Component } from 'react'

export default class Jack extends Component {
  add = () => {
    this.props.Add()
  }

  render () {
    return (
      <div>
        <h3>
          我是Son1组件<button onClick={this.add}>点我,将Son2中的num+1</button>
        </h3>
      </div>
    )
  }
}

Son2.js  

/* eslint-disable react/prop-types */
import React, { Component } from 'react'

export default class Rose extends Component {
  render () {
    const { num } = this.props
    return (
      <div>
        <h3>我是Son2组件-{num}</h3>
      </div>
    )
  }
}

 

组件通讯 -跨级组件通讯

基本素材代码结构

-app.css # 样式
-app.js  # 根组件

-content.js # 封装通讯组件
-Parent.js # 父组件,与Uncle同级
-Uncle.js  # 
-Son.js    # 子组件

app.js  

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import Parent from './parent'
import Uncle from './uncle'
import './app.css'
import { Provider } from './context'

class App extends React.Component {
  state = {
    num: 0
  }

  addClick = () => {
    this.setState({
      num: this.state.num + 1
    })
  }

  render () {
    const { num } = this.state
    const { addClick } = this
    return (
      <Provider value={{ num, addClick }}>
        <div>
          根组件， num:
          {this.state.num}
          <Parent />
          <Uncle />
        </div>
      </Provider>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

  app.css

div {
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
}

                                                                       content.js

import { createContext } from 'react'
const { Provider, Consumer } = createContext()
export { Consumer, Provider }

                                                                Parent.js

import React from 'react'
import Son from './son'
export default class Parent extends React.Component {
  render () {
    return (
      <div>
        我是parent组件
        <Son />
      </div>
    )
  }
}

                                                                Uncle.js

import React from 'react'
import { Consumer } from './context'
export default class Uncle extends React.Component {
  render () {
    return (
      <Consumer>
        {(data) => {
          console.log(data)
          return <div>我是uncle组件{data.num}</div>
        }}
      </Consumer>
    )
  }
}

                                                                Son.js

import React from 'react'
import { Consumer } from './context'
export default class Son1 extends React.Component {
  render () {
    return (
      <Consumer>
        {(data) => {
          console.log(data)
          return (
            <div>
              我是son1组件{data.num}
              <button
                onClick={() => {
                  data.addClick()
                }}>
                add
              </button>
            </div>
          )
        }}
      </Consumer>
    )
  }
}