React组件通信传值 父传子 子传父 兄弟组件传值

一、父组件传递子组件

在父组件中引入子组件，将父组件的state值放到子组件标签中传递，在子组件中用this.props.传值名称，接收

父组件代码：

import React, { Component } from 'react'
import Goods from '../Good/Goods'

export default class App extends Component {
  constructor(){
    super()
    this.state = {
      mess: '123' //初始化mess属性
    }
  }
  render() {
    return (
      <div>
          <h1>{this.state.mess}</h1>
            {/* 子组件 */}
          <Goods txt={this.state.mess}></Goods>
      </div>
    )
  }
}

子组件代码：

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

export default class Goods extends Component {
    constructor(props){
        super()
    }
    render() {
        return (
            <div>
                {/* 接收父组件传递的值 */}
                <h1>{this.props.txt}</h1>
            </div>
        )
    }
}

还可以设置默认值 首先引入 prop-types 代码如下：

import PropTypes from 'prop-types'
Goods.defaultProps={
    'title':'Titele'
}

 Goods是组件名 title是默认值名称 Title是默认值

也可以校验传值的类型 代码如下：

import PropTypes from 'prop-types'
Goods.propTypes = {
    'title':PropTypes.string.isRequired
}

PropTypes.string是检查是否为字符串

其他的是：

检查值是否为数组
PropTypes.array
检查值是否为布尔类型
PropTypes.bool
检查值是否为函数
PropTypes.func
检查值是否为数字
PropTypes.number
检查值是否为对象
PropTypes.object
检查值是否为Symbol类型
PropTypes.symbol

二、子组件传递父组件

通过this.props.名称（值）传给父组件，父组件在子组件标签中定义方法接收修改渲染的this.state值；代码如下：

子组件代码：

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

class Goods extends Component {
    constructor(props){
        super()
    }
    // 点击事件触发此方法
    zcf=()=>{
        this.props.fn1('传过来了')
    }
    render() {
        return (
            <div>
                <h1>{this.props.txt}</h1>
                {/* 按钮 通过点击事件传值 */}
                <input type='button' value='传' onClick={this.zcf}></input>
            </div>
        )
    }
}

父组件代码：

import Goods from '../Good/Goods'
export default class App extends Component {
  constructor(){
    super()
    this.state = {
      mess: '123' //初始化mess属性
      }
  }
    // 接收子组件传递的值 修改state状态值
  shou = (msg)=>{
    this.setState({mess: msg});
  }
  render() {
    return (
      <div>
          <h1>{this.state.mess}</h1>
            {/* fn1为子组件传过来的值 txt为传给子组件的值 */}
          <Goods fn1={this.shou} txt={this.state.mess}></Goods>
          
      </div>
    )
  }
}

三、兄弟组件传值

兄弟组件传值有两种方法：

第一种方法是通过父组件作为中转传递双方的数据

组件A—传递—> 父组件 —传递—>组件B

这种形式就是把以上两步重新做了一遍 是比较繁琐的 不建议使用这种方法

第二种可以理解成借用一个仓库进行传值

首先创建一个文件作为仓库代码如下：

import {EventEmitter} from 'events'

export default new EventEmitter()

然后两个组件都引入这个文件

组件A通过emit向组件B传递数据

组件B通过on接收传递过来的值

代码如下：

组件A代码：

import React, { Component } from 'react'
import eventbus from '../../lib/eventbus'//引入仓库
export default class Com extends Component {
    constructor(){
        super()
        this.state={
        }
    }
    push = () => {
        return ()=>eventbus.emit('chuan','组件A值')
        
    }
    render() {
        return (
            <div>
                {/* 通过按钮点击事件触发传值方法 */}
                <input type='button' value='兄弟传值' onClick={this.push()} />
            </div>
        )
    }
}

组件B 代码：

import React, { Component } from 'react'
import eventbus from '../../lib/eventbus'//引入仓库
export default class List extends Component {
    constructor(){
        super()
        this.state={
            // 初始值
            title:'11111'
        }
    }
    // 挂载自动执行的生命周期
    componentDidMount(){
        // 接收组件A传递的值
        eventbus.on('chuan',(msg)=>{
            // 修改成组件A传递过来的值
            this.setState({title:msg})
        })
    }
    render() {
        return (
            <div>
                <h3>{this.state.title}</h3>
            </div>
        )
    }
}

 至此，即可实现兄弟组件之间的传值了！

现在将两个组件引入带父组件中查看效果即可。