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

父组件

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

点波关注,持续更新哦~

相关文章
|
6月前
|
前端开发 API
react怎么实现父子组件传值?
react怎么实现父子组件传值?
30 1
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
116 0
|
23天前
|
前端开发 JavaScript Android开发
Flutter 与 React Native - 详细深入对比分析(2024 年)
Flutter和React Native是两大跨平台框架,各有优缺点。Flutter性能优越,UI灵活,使用Dart;React Native生态广泛,适合JavaScript开发。
112 5
Flutter 与 React Native - 详细深入对比分析(2024 年)
|
8天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
3月前
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
69 0
|
3月前
|
开发者 缓存 数据库
【性能奇迹】Wicket应用的极速重生:揭秘那些让开发者心跳加速的调优秘技!
【8月更文挑战第31天】在软件开发中,性能优化是确保应用快速响应和高效运行的关键。本书《性能调优:Apache Wicket应用的速度提升秘籍》详细介绍了如何优化Apache Wicket应用,包括代码优化、资源管理、数据库查询优化、缓存策略及服务器配置等方面。通过减少不必要的组件渲染、优化SQL查询、使用缓存和调整服务器设置等方法,本书帮助开发者显著提升Wicket应用的性能,确保其在高并发和数据密集型场景下的稳定性和响应速度。
41 0
|
3月前
|
开发框架 前端开发 JavaScript
探索现代Web开发中的框架选择:Blazor、Angular和React的全面比较与分析
【8月更文挑战第31天】随着Web开发技术的发展,选择合适的框架对项目成功至关重要。本文对比了三大前端框架:Blazor、Angular和React。Blazor是微软推出的.NET Web客户端开发框架,支持C#编写前端代码;Angular由Google支持,基于TypeScript,适用于大型应用;React是由Facebook维护的高效JavaScript库。
54 0
|
3月前
|
开发框架 Dart 前端开发
移动应用开发中的跨平台策略:React Native与Flutter的比较分析
【8月更文挑战第31天】 在快速变化的移动应用市场,开发者面临着如何在众多平台间高效部署应用的挑战。本文将深入探讨两种主流的跨平台移动应用开发框架——React Native和Flutter,通过对比它们的核心特性、性能表现以及社区生态,为开发者提供选择框架时的参考依据。我们将借助代码示例,展现两者在实际开发中的应用差异,并分析各自的优势和潜在局限,以期帮助开发者根据项目需求做出明智的技术选型。
|
5月前
|
移动开发 Dart 前端开发
深度分析:React Native、Flutter、UniApp、Taro、Vue的差异
深度分析:React Native、Flutter、UniApp、Taro、Vue的差异
367 6
|
6月前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
1785 1
【Uniapp 专栏】Uniapp 与 React Native 的对比分析