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

点波关注,持续更新哦~

相关文章
|
8天前
|
前端开发 JavaScript 测试技术
React 分页组件 Pagination
本文介绍了如何在 React 中从零构建分页组件,涵盖基础概念、常见问题及解决方案。通过示例代码详细讲解了分页按钮的创建、分页按钮过多、初始加载慢、状态管理混乱等常见问题的解决方法,以及如何避免边界条件、性能优化和用户反馈等方面的易错点。旨在帮助开发者更好地理解和掌握 React 分页组件的开发技巧,提升应用的性能和用户体验。
33 0
|
1月前
|
前端开发 开发者
React 函数组件与类组件对比
【10月更文挑战第4天】本文详细比较了React中的函数组件与类组件。函数组件是一种简单的组件形式,以纯函数的形式返回JSX,易于理解与维护,适用于简单的UI逻辑。类组件则是基于ES6类实现的,需要重写`render`方法并能利用更多生命周期方法进行状态管理。文章通过示例代码展示了两者在状态管理与生命周期管理上的差异,并讨论了常见的问题如状态更新异步性与生命周期管理的复杂性,最后给出了相应的解决方法。通过学习,开发者可以根据具体需求选择合适的组件类型。
55 8
|
1月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
163 2
|
12天前
|
移动开发 前端开发 API
React 拖拽组件 Drag & Drop
本文介绍了在 React 中实现拖拽功能的方法,包括使用原生 HTML5 Drag and Drop API 和第三方库 `react-dnd`。通过代码示例详细讲解了基本的拖拽实现、常见问题及易错点,帮助开发者更好地理解和应用拖拽功能。
42 9
|
7天前
|
前端开发 UED 开发者
React 分页组件 Pagination
本文介绍了如何在 React 中实现分页组件,从基础概念到常见问题及解决方案。分页组件用于将大量数据分成多个页面,提升用户体验。文章详细讲解了分页组件的基本结构、快速入门步骤、以及如何处理页面跳转不平滑、页码过多导致布局混乱、边界条件处理和数据加载延迟等问题。通过本文,读者可以全面了解并掌握 React 分页组件的开发技巧。
12 2
|
11天前
|
设计模式 前端开发 编译器
与普通组件相比,React 泛型组件有哪些优势?
与普通组件相比,React 泛型组件有哪些优势?
28 6
|
1月前
|
前端开发 JavaScript Android开发
Flutter 与 React Native - 详细深入对比分析(2024 年)
Flutter和React Native是两大跨平台框架,各有优缺点。Flutter性能优越,UI灵活,使用Dart;React Native生态广泛,适合JavaScript开发。
299 5
Flutter 与 React Native - 详细深入对比分析(2024 年)
|
19天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
34 2
|
26天前
|
前端开发 JavaScript 测试技术
React 高阶组件 (HOC) 应用
【10月更文挑战第16天】高阶组件(HOC)是 React 中一种复用组件逻辑的方式,通过接受一个组件并返回新组件来实现。本文介绍了 HOC 的基础概念、核心功能和常见问题,包括静态方法丢失、ref 丢失、多个 HOC 组合和 props 冲突的解决方案,并提供了具体的 React 代码示例。通过本文,读者可以更好地理解和应用 HOC,提高代码的复用性和可维护性。
56 8
|
25天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。