React中的父子组件之间的传值通信

在父组件中，通过state的方式定义组件的参数进行初始化

// 定义App组件的状态值
  state = {
    msg: '我来自父组件',
    messageA: '', // 接受A组件信息
    messageB: '', // 接受B组件信息
  }

通过import调用子组件

// 组件引用
import PageA from './components/pageA'
import PageB from './components/pageB'

在父传子的过程中，只需要在父组件中定义参数，通过以下方式传值

在子组件中通过this.props.msg即可获取父组件的传值

 // 父组件向子组件传值
 <PageA msg={this.state.msg}/>
 <PageB msg={this.state.msg}/>


{/* 子组件中，通过this.props的方式接收父组件的传值 */}
<div style={{color: 'red'}}>A组件信息：{this.props.msg}</div>

在子组件向父组件传值的过程中，需要在父组件中定义接收子组件传值的函数，在子组件中通过this.props的方式调用父组件函数即可完成传值

//父组件中定义函数
  // 定义接收A组件的传值函数
  getMessageA = (message) =>{
    this.setState({
      messageA : message
    })
  }

  // 定义接收B组件的传值函数
  getMessageB = (message) =>{
    this.setState({
      messageB : message
    })
  }


//父组件中给子组件传函数
<PageA msg={this.state.msg} getMessageA = {this.getMessageA}/>
<PageB msg={this.state.msg} getMessageB = {this.getMessageB}/>


//子组件中调用父组件函数
// 定义向父组件传值的函数
  sendMessage = ()=>{
    this.props.getMessageA('你好，我来自A组件')
  }

// 定义向父组件传值的函数
  sendMessage = ()=>{
    this.props.getMessageB('你好，我来自B组件')
  }

完整代码：

App.jsx

import React, { Component } from 'react'

// 组件引用
import PageA from './components/pageA'
import PageB from './components/pageB'

export default class App extends Component {

  // 定义App组件的状态值
  state = {
    msg: '我来自父组件',
    messageA: '', // 接受A组件信息
    messageB: '', // 接受B组件信息
  }

  // 定义接收A组件的传值函数
  getMessageA = (message) =>{
    this.setState({
      messageA : message
    })
  }

  // 定义接收B组件的传值函数
  getMessageB = (message) =>{
    this.setState({
      messageB : message
    })
  }
  render() {
    return (
      <div>
        {/* 调用组件，msg={this.state.msg}：父向子传值方式，getMessageA = {this.getMessageA}：子向父传值方式 */}
        <PageA msg={this.state.msg} getMessageA = {this.getMessageA}/>
        <PageB msg={this.state.msg} getMessageB = {this.getMessageB}/>
        <div>
          <h2>这里是父组件信息：</h2>
          <div style={{color: 'red'}}>组件A发送的信息是：{this.state.messageA}</div>
          <div style={{color: 'red'}}>组件B发送的信息是：{this.state.messageB}</div>
        </div>
      </div>
    )
  }
}

PageA组件

import React, { Component } from 'react'

export default class PageA extends Component {

  // 定义向父组件传值的函数
  sendMessage = ()=>{
    this.props.getMessageA('你好，我来自A组件')
  }
  render() {
    return (
      <div>
        <h2>我是pageA组件</h2>
        {/* 子组件中，通过this.props的方式接收父组件的传值 */}
        <div style={{color: 'red'}}>A组件信息：{this.props.msg}</div>
        <button onClick={this.sendMessage}>点击我，向父组件发送信息</button>
      </div>
    )
  }
}

PageB组件

import React, { Component } from 'react'

export default class PageB extends Component {

  // 定义向父组件传值的函数
  sendMessage = ()=>{
    this.props.getMessageB('你好，我来自B组件')
  }
  render() {
    return (
      <div>
        <h2>我是pageB组件</h2>
        {/* 子组件中，通过this.props的方式接收父组件的传值 */}
        <div style={{color: 'red'}}>B组件信息：{this.props.msg}</div>
        <button onClick={this.sendMessage}>点击我，向父组件发送信息</button>
      </div>
    )
  }
}

效果如下：