前言
上篇推文讲了react中父子组件的传值方法,今天来讲讲祖孙组件如何进行传值操作,下面写个小案例来讲解中间的过程
祖孙组件传值
我们写一个最外层组件传值给孙组件的案例
最外层组件
最外层组件(祖组件)index.js:
1.在state中定义一个list数组,我们这里要做一个下拉框需要数据
2.在render中对state进行解构,先利用list.map循环出Parent父组件,并给父组件绑定key,value和color
3.再写一个select下拉框,需求是可以通过外层组件下拉框的选值改变孙组件的值,给select绑定onChange时间,并写handleSelect函数更改color的值
export class Index extends Component {
state = {
list: [
{ id: 1, value: 'blue' },
{ id: 2, value: 'red' },
{ id: 3, value: 'green' }
color: 'red'
handleSelect = (e) => {
this.setState({color: e.target.value})
render() {
let { list, color } = this.state
return (
<div>Index Page
<select value={color} onChange={this.handleSelect}>
list.map(item => <option key={item.id}>{item.value}</option>)
</select>
list.map(item => <Parent key={item.id} value={item.value} color={color} />)
}
父组件
1.给input输入框绑定value,值来自外层组件传入的
2.同样给input绑定onChange时间,在state中定义自己的name属性
3.给Son组件传入{...this.props}
import React, { Component } from 'react'
import Son from './son'
export class Parent extends Component {
state = {
name: ''
handleChange = (e) => {
this.setState({name: e.target.value})
render() {
return (
<div>Parent Page
<input type="text" value={this.props.value} onChange={this.handleChange} />
<Son {...this.props} />
export default Parent
孙组件
现在要把最外层的组件的值传过来,可以改变孙组件的颜色
直接给button添加style绑定color为this.props.color,button里面值为{this.props.value}<
import React, { Component } from 'react'
export class Son extends Component {
render() {
return <button style={{"color": this.props.color}}>{this.props.value}</button>
export default Son
这样我们就成功的把最外层的值传给了里面的孙组件~
实现最终效果:
最后
这两篇文章就是给大家讲的使用props进行传值,下节课会给大家介绍context传值的方法,也是在react很常用的传值方法。
点波关注,持续更新哦~
之前的文章我们介绍了在react中使用props实现组件通信,比如父子,祖孙通信,但是使用props一层层传递的时候还是很麻烦的,那么今天这篇文章就来介绍新的用法——使用Context实现组建通信