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

简介: 本文主要讲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>
        )
    }
}
AI 代码解读

父组件

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
AI 代码解读

孙组件

现在要把最外层的组件的值传过来,可以改变孙组件的颜色
直接给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
AI 代码解读

这样我们就成功的把最外层的值传给了里面的孙组件~

实现最终效果:
在这里插入图片描述

最后

这两篇文章就是给大家讲的使用props进行传值,下节课会给大家介绍context传值的方法,也是在react很常用的传值方法。

点波关注,持续更新哦~

相关文章
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
165 68
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
147 67
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
151 62
React 音频播放器组件 Audio Player
本文介绍如何使用React创建音频播放器组件,涵盖核心功能如播放/暂停、进度条、音量控制和时间显示。通过HTML5 `&lt;audio&gt;` 元素和React的声明式状态管理,实现交互式音频播放。常见问题包括控件不响应、进度条无法更新和音量控制失灵,并提供解决方案。此外,还讨论了浏览器兼容性、异步错误处理和性能优化等易错点及避免方法。
438 123
除了使用Route组件,React Router还有其他方式处理404错误页面吗
除了使用Route组件,React Router还有其他方式处理404错误页面吗
117 58
React 中高阶组件的原理是什么?
React 中高阶组件的原理是什么?
147 57
除了函数组件和类组件,React 还有其他创建组件的方式吗?
除了函数组件和类组件,React 还有其他创建组件的方式吗?
118 57
如何在React Router中定义404错误页面组件?
如何在React Router中定义404错误页面组件?
120 57
在 React 中使用高阶组件时,如何避免命名冲突?
在 React 中使用高阶组件时,如何避免命名冲突?
125 56
React音频播放列表组件:常见问题、易错点与解决方案
本文介绍了在React中实现音频播放列表时常见的挑战及解决方案。通过基础实现、常见问题分析和最佳实践,帮助开发者避免状态管理、生命周期控制和事件处理中的陷阱。关键点包括使用`useRef`操作音频元素、`useState`同步播放状态、全局状态管理防止多音频同时播放、以及通过`useEffect`清理资源。还提供了代码示例和跨浏览器兼容性处理方法,确保高效实现功能并减少调试时间。
159 30
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问