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>)}
}

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

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