React中祖孙组件嵌套传值（案例分析说明）

前言

上篇推文讲了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} />)
                }
            </div>
        )
    }
}

父组件

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

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很常用的传值方法。

点波关注，持续更新哦~