在文章之前,先把这句话读三遍

Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式。注意:组件可以接受任意 props,包括基本数据类型,React 元素以及函数。

来源于React中文文档,组合和继承的一句话

其实这句话之前看过很多遍,主要还是应用于数据获取上。

在完全理解这句话之前,在写子组件改变兄弟子组件的状态上,没有头绪,同事上午跟我讲解了,我自己再把代码重新写一遍就认识到了,我完全忽略了组件传函数的方法,解锁这个方法以后,再写代码如同打开了一扇大门。

下面来看例子:

以上是一个页面,四个组件,页面里面嵌套第一个组件,组件1嵌套组件2,组件2嵌套组件3,组件3嵌套组件4

所有组件均可以改变其他组件的数据

代码

页面page

import React, { Component } from "react";
import First from "./Component/First"; export default class App extends Component {
constructor(props) {
super(props);
this.state = {
changeText: "我是初始值"
};
} onClick = () => {
this.setState({
changeText: "改变了初始值"
});
}; Reset = () => {
this.setState({
changeText: "我是初始值"
});
}; render() {
const { changeText } = this.state; return (
<div>
<div style={{ fontSize: "25px", marginBottom: "10px" }}>
我是组件传值Title
</div>
<div style={{ color: "blue" }}>
我是页面层changeText:{this.state.changeText}
</div>
<First
onClick={this.onClick}
Reset={this.Reset}
changeText={changeText}
/>
</div>
);
}
}

 组件一

import React, { Component } from "react";
import { Button } from "antd";
import Second from "./Second"; export default class First extends Component {
render() {
return (
<div>
<p>我是组件1的文字: {this.props.changeText}</p>
<Button
type="primary"
onClick={this.props.onClick}
style={{ marginBottom: "10px" }}
>
First
</Button> <Button
type="default"
onClick={this.props.Reset}
style={{ marginLeft: "30px" }}
>reset</Button>
<Second changeText={this.props.changeText} onClick={this.props.onClick}/>
</div>
);
}
}

  组件二

import React, { Component } from 'react'
import {Button} from 'antd'
import Third from './Third' export default class Second extends Component{ render(){
return(
<div>
<p>我是组件2的文字 :{this.props.changeText}</p>
<Button type='primary' onClick={this.props.onClick} style={{marginBottom:'10px'}}>Second</Button>
<Third changeText={this.props.changeText} onClick={this.props.onClick}/>
</div>
)}
}

  组件三

import React, { Component } from 'react'
import {Button} from 'antd'
import Fourth from './Fourth' export default class Third extends Component{ render(){
return(
<div>
<p>我是组件3的文字: {this.props.changeText}</p>
<Button type='primary' onClick={this.props.onClick} style={{marginBottom:'10px'}}>third</Button>
<Fourth changeText={this.props.changeText} onClick={this.props.onClick}/>
</div>
)}
}

  组件四

import React, { Component } from 'react'
import {Button} from 'antd' export default class Fourth extends Component{ render(){
return(
<div>
<p>我是组件4的文字 :{this.props.changeText}</p>
<Button type='default' onClick={this.props.onClick} style={{marginBottom:'10px'}}>fourth</Button>
</div>
)}
}

  文件目录

这样就可以实现操作state,改变所有页面的内容。

如果想更灵活,可以引入mobx

 

深入理解React组件传值(组合和继承)的更多相关文章

  1. 编写高性能React组件-传值篇

    很多人在写React组件的时候没有太在意React组件的性能,使得React做了很多不必要的render,现在我就说说该怎么来编写搞性能的React组件. 首先我们来看一下下面两个组件 import ...

  2. React组件传值方式总结

    1. 子组件向父组件传值 父组件Header: import Nav from 'Nav.js'; class Header extends React.Component { constructor ...

  3. 深入理解Java中的组合和继承

    Java是一个面向对象的语言.每一个学习过Java的人都知道,封装.继承.多态是面向对象的三个特征.每个人在刚刚学习继承的时候都会或多或少的有这样一个印象:继承可以帮助我实现类的复用.所以,很多开发人 ...

  4. React组件传值

    React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数据流,数据主要从父 ...

  5. 理解React组件的生命周期

    本文作者写作的时间较早,所以里面会出现很多的旧版ES5的时代的方法.不过,虽然如此并不影响读者理解组件的生命周期.反而是作者分为几种不同的触发机制来解释生命周期的各个方法,让读者更加容易理解涉及到的概 ...

  6. React 组件传值 父传递儿子

    10===> 传递参数 import React from "react" //一定要导入React // 函数类型去创建组件 export function Web1(pr ...

  7. [转] 深入理解React 组件状态(State)

    React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...

  8. 深入理解React 组件状态(State)

    React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...

  9. React组件生命周期小结

    React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...

随机推荐

  1. go语言系列--前言

    我为什么要学golang语言 绝不是一时兴起,也不是人云亦云,这是我规划了很久的事了. 我曾自学过C语言,C++语言,Python语言,可都学的不精,原因我想是不知道为了什么而学的,可是这就是缺少学习 ...

  2. Bootstrap Table 的X-editable插件怎么用

    在准备使用X-editable来做Bootstrap Table 的行内编辑的时候,根据http://www.cnblogs.com/landea... 的文章,我不能将全部效果重复实现,网上也搜索了 ...

  3. android开机引导界面的几种实现

    不少应用在设计的时候都会有几个引导界面,这里总结一下几个典型实现: 之前自己做过仅具有一个引导界面的应用,在welcomeActivity中设置一张图片,更复杂的为该图片设置一个渐入渐出的动画,然后利 ...

  4. 【每日一包0006】dedupe

    github地址:https://github.com/ABCDdouyae... dedupe 对数组进行去重,也可以自定义去重(比如要求数组的每一个对象的某个属性不重复) 文档地址:https:/ ...

  5. iframe嵌套页面 跨域

    父级调用iframe方法: document.getElementById("iframe").contentWindow.func(data1,data2...) 子级 ifra ...

  6. Django REST framework的解析器与渲染器

    解析器 解析器的作用 解析器的作用就是服务端接收客户端传过来的数据,把数据解析成自己可以处理的数据.本质就是对请求体中的数据进行解析. 在了解解析器之前,我们要先知道Accept以及ContentTy ...

  7. Oracle开发:dba和sysdba的区别

    oracle dba和sysdba的区别如下: 1.dba是一种role对应的是对Oracle实例里对象的操作权限的集合,而sysdba是概念上的role是一种登录认证时的身份标识而已.而且,dba是 ...

  8. CentOS 6.5系统使用yum方式安装LAMP环境和phpMyAdmin,mysql8.0.1/mysql5.7.22+centos7,windows mysql安装、配置

    介绍如何在CentOs6.2下面使用YUM配置安装LAMP环境,一些兄弟也很喜欢使用编译的安装方法,个人觉得如果不是对服务器做定制,用yum安装稳定简单,何必去download&make&am ...

  9. Linux的远程桌面折腾指南

    因为实验服务器需要远程提供给研一童鞋使用,这两天折腾了一下Linux的远程桌面,在此记录总结一下.服务器系统为Lubuntu 16.04 远程登录到Linux 方案一:简单使用--x11vnc 单用户 ...

  10. CSS3—— 多列 用户界面 图片 按钮

    多列 将文本内容设计成像报纸一样的多列布局 多列创建 间隙 列边框 边框颜色+宽度 指定列的宽度 指定元素跨越多少列 用户界面 由用户调整元素大小[谷歌浏览器等] 以确切的方式定义适应某个区域的具体内 ...