react学习笔记12：组件之间交互

最新推荐文章于 2023-08-23 18:02:41 发布
最新推荐文章于 2023-08-23 18:02:41 发布
阅读量201 收藏
点赞数
原文链接：https://my.oschina.net/tbd/blog/1545313
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

我们创建一个新的项目， component-test 专门学习我们的组件交互。

利用create-react-app工具

create-react-app component-test
cd component-test
npm start

修正代码：

index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <title>组件交互</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

把其他文件全部删除即可！

103959_87v2_2352644.png

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';


class Test extends Component {
  render() {
    return (
		<div>
			组件交互
		</div>
    );
  }
}


ReactDOM.render(<Test />, document.getElementById('root'));
registerServiceWorker();

组件之间的关系可简单分为：

父子组件

爷孙组件

兄弟组件

当前和兄弟的子组件

当前和兄弟的孙组件

 

1.父子组件交互

1.1父组件传值给子组件

我们使用的就是this.props.xx接收和显示：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';


class Test extends Component {
	
	constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            msg1: "1儿子你好",
			msg2: "2儿子你好"
        };

    }
		
	render() {
		return (
			<div>
				组件交互
				<p>给1儿子说的话：{this.state.msg1}</p>
				<p>给2儿子说的话：{this.state.msg2} </p>
				<div>
					我是1儿子组件：<Sub1 msg={this.state.msg1} />
				</div>
				<div>
					我是2儿子组件<Sub2 msg={this.state.msg2} />
				</div>
			</div>
		);
	}
}

class Sub1 extends Component {
  render() {
    return (
		<div>
			我是儿子1
			<div>收到爸爸的问候：{this.props.msg}</div>
		</div>
    );
  }
}

class Sub2 extends Component {
  render() {
    return (
		<div>
			我是儿子2
			<div>收到爸爸的问候：{this.props.msg}</div>
		</div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById('root'));
registerServiceWorker();

我们看到效果：

104940_A0xN_2352644.png

调用位置利用某个属性设置要传递的值，在子组件的this.props就会获取到！

 

1.2子组件传话给父组件

我们的需求是这样的，我们点击1儿子的一个按钮，通知父组件我收到了你的问候，把父组件对1儿子的问候语改为：

“谢谢1儿子的回复”

既然父组件可以把状态值传给子组件，那么我们就把父组件的一个方法传给子组件，这个父组件的方法就是改变msg1的值：

105648_bXHU_2352644.png

105703_idMY_2352644.png

全部代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';


class Test extends Component {
	
	constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            msg1: "1儿子你好",
			msg2: "2儿子你好"
        };

    }
	
	setMsg1() {
		this.setState({msg1:"谢谢1儿子的回复"})
	}
		
	render() {
		return (
			<div>
				组件交互
				<p>给1儿子说的话：{this.state.msg1}</p>
				<p>给2儿子说的话：{this.state.msg2} </p>
				<div>
					我是1儿子组件：<Sub1 msg={this.state.msg1} setMsg1={this.setMsg1.bind(this)} />
				</div>
				<div>
					我是2儿子组件<Sub2 msg={this.state.msg2} />
				</div>
			</div>
		);
	}
}

class Sub1 extends Component {
  render() {
    return (
		<div>
			我是儿子1
			<div onClick={this.props.setMsg1}>收到爸爸的问候：{this.props.msg}</div>
		</div>
    );
  }
}

class Sub2 extends Component {
  render() {
    return (
		<div>
			我是儿子2
			<div>收到爸爸的问候：{this.props.msg}</div>
		</div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById('root'));
registerServiceWorker();

我们点击之后：

105737_Bkfw_2352644.png

变为：

105757_4WtK_2352644.png

 

2.爷孙组件交互

2.1爷孙传值

我们给1儿子加2个儿子，出现2孙子：

儿子1给他的儿子传值：

110346_1i9i_2352644.png

2个孙子：

110406_S8Oz_2352644.png

全部代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';


class Test extends Component {
	
	constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            msg1: "1儿子你好",
			msg2: "2儿子你好"
        };

    }
	
	setMsg1() {
		this.setState({msg1:"谢谢1儿子的回复"})
	}
		
	render() {
		return (
			<div>
				组件交互
				<p>给1儿子说的话：{this.state.msg1}</p>
				<p>给2儿子说的话：{this.state.msg2} </p>
				<div>
					我是1儿子组件：<Sub1 msg={this.state.msg1} setMsg1={this.setMsg1.bind(this)} />
				</div>
				<div>
					我是2儿子组件<Sub2 msg={this.state.msg2} />
				</div>
			</div>
		);
	}
}

class Sub1 extends Component {
  render() {
    return (
		<div>
			我是儿子1
			<div onClick={this.props.setMsg1}>收到爸爸的问候：{this.props.msg}</div>
			我的儿子1：<Three1 msg={this.props.msg} />
			我的儿子2<Three2 msg={this.props.msg} />
		</div>
    );
  }
}

class Three1 extends Component {
  render() {
    return (
		<div>
			我是孙子1（爸爸是1儿子）
			<div>收到爷爷的问候：{this.props.msg}</div>
		</div>
    );
  }
}
class Three2 extends Component {
  render() {
    return (
		<div>
			我是孙子2（爸爸是1儿子）
			<div>收到爷爷的问候：{this.props.msg}</div>
		</div>
    );
  }
}

class Sub2 extends Component {
  render() {
    return (
		<div>
			我是儿子2
			<div>收到爸爸的问候：{this.props.msg}</div>
		</div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById('root'));
registerServiceWorker();

同理，非常简的处理，就是不断传递

 

2.2孙子传话给爷爷

其实同上面的原理，我们直接修改代码：

110655_kLTZ_2352644.png

点击修改：

110713_dR7T_2352644.png

全部代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';


class Test extends Component {
	
	constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            msg1: "1儿子你好",
			msg2: "2儿子你好"
        };

    }
	
	setMsg1() {
		this.setState({msg1:"谢谢1儿子的回复"})
	}
		
	render() {
		return (
			<div>
				组件交互
				<p>给1儿子说的话：{this.state.msg1}</p>
				<p>给2儿子说的话：{this.state.msg2} </p>
				<div>
					我是1儿子组件：<Sub1 msg={this.state.msg1} setMsg1={this.setMsg1.bind(this)} />
				</div>
				<div>
					我是2儿子组件<Sub2 msg={this.state.msg2} />
				</div>
			</div>
		);
	}
}

class Sub1 extends Component {
  render() {
    return (
		<div>
			我是儿子1
			<div onClick={this.props.setMsg1}>收到爸爸的问候：{this.props.msg}</div>
			我的儿子1：<Three1 msg={this.props.msg}  setMsg1={this.props.setMsg1} />
			我的儿子2<Three2 msg={this.props.msg} />
		</div>
    );
  }
}

class Three1 extends Component {
  render() {
    return (
		<div>
			我是孙子1（爸爸是1儿子）
			<div onClick={this.props.setMsg1}>收到爷爷的问候：{this.props.msg}</div>
		</div>
    );
  }
}
class Three2 extends Component {
  render() {
    return (
		<div>
			我是孙子2（爸爸是1儿子）
			<div>收到爷爷的问候：{this.props.msg}</div>
		</div>
    );
  }
}

class Sub2 extends Component {
  render() {
    return (
		<div>
			我是儿子2
			<div>收到爸爸的问候：{this.props.msg}</div>
		</div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById('root'));
registerServiceWorker();

 

3.兄弟组件交互

这个我们就不多说了，其实都是子组件传话给父组件的原理，要通过兄弟之间的父组件作为交互桥梁

转载于:https://my.oschina.net/tbd/blog/1545313

weixin_34023863
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React——组件的组合与交互
敲代码的小李同学的博客
07-03 488
React 中父组件与子组件方法、标签、值的传递。
React 组件间通信
热门推荐
CSU_Zipple的博客
07-20 1万+
在经历了许多的html+css+js的传统网页制作之后，最近开始上手react了。学了一点语法之后就开始了react的项目， 然而事情不总是一帆风顺的。刚上手的时候，项目的进度就是一团糟。各种迷之bug纷至沓来，在这里真的要提醒诸位，在写react es6语法的时候，html结构中的dom事件千万要注意大小写，比如html结构中的onclick事件，这个在html页面中是这样写的，然而在es6里面
React学习（3）- 组件交互
xili1342的博客
07-30 308
React学习（3）- 组件交互
React 从零开始学习（四）—— 组件交互
且听风吟的博客
07-21 397
在 React 应用中，数据通过 props 的传递，从父组件流向子组件。
React 父子组件互相交互
Cribug8080的博客
04-11 655
script分为三个部分： ReactDOM.render Father 构造父组件 Sub 构造子组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...
react父子组件之间的通信方式--最完整的Demo、最简洁的方式（子向父，父向子）
吃瓜群众的博客
02-26 3103
react组件中，比如table表单跟modal之间的交互，经常涉及到参数和方法等等之间的的交互。 组件：Ant Design of React 父组件 class ProductList extends React.PureComponent { clickMe(){ this.setState({ }) console.log("") } render(){ const props =...
react组件间通信
高先生的猫
06-11 271
一、父组件向子组件通信 React 数据流动是单向的，父组件向子组件的 通信也是最常见的方式。父组件通过 props 向子组件传递需要的信息 function EmailInput(props) { return ( <label> Email: <input value={props.email} /> </label> ); } const element = <EmailInput email="123124132@
React中的组件通信（一）
qq_56989560的博客
06-10 290
父传子 子传父 兄弟 组件之间的通信
关于React组件之间如何优雅地传值的探讨
weixin_30470857的博客
12-25 135
闲话不多说，开篇撸代码，你可以会看到类似如下的结构： import React, { Component } from 'react'; // 父组件 class Parent extends Component { constructor() { super(); this.state = { color: 'red' }; } r...
2-1、React组件及组件交互基本知识
xuanyu.li的博客
10-23 355
React中组件基本知识及使用简介
React 中组件间通信的几种方式
逆钟夕的忘忧阁
06-26 389
文章引用：https://blog.csdn.net/p106786860/article/details/52408875 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信
react学习笔记--组合组件使用__交互
qq_44983621的博客
09-17 253
react学习笔记–组合组件使用__交互 这个是效果图，点击add把文本框的内容添加到下面的list中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
React学习日记--组件组合-交互使用
m0_52758139的博客
09-07 91
你长得那么好看点个赞吧！ 没看明白的欢迎提问喔！ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>05_components_composing</title> </head> <body> <div id="example"></div> <script type="text/j
全网最细：Jest+Enzyme测试React组件（包含交互、DOM、样式测试）
量子前端的博客
06-20 3432
Jest是目前前端工程化下单元测试火热的技术栈，而Enzyme的支持提供了Jest测试React业务、组件的能力，下面来介绍一下React组件测试的一些实际场景。 2. 测试环境搭建 由于enzyme的配置在每次需要测试组件时都需要加入，因此配置setup.js后在每次测试组件中提前引入是不错的选择。setup.js: jest.config.js配置： 3. 组件基础渲染测试 在为组件添加prop传值之前，可配置一个基础的 mountTest.tsx 来对组件进行一个基础渲染挂载测试，测试通过后在进行复杂
React组件之间的传值
kongjunchao159的博客
05-25 5065
父组件向子组件传值？传参，props接收 子组件向父组件传值？回调函数 这里重点说一下无关系组件之间的交互 React中没有任何嵌套关系的组件之间如何传值？ 方案一：全局广播的方式，即Publish/Subscribe，需要引入PubSubJS库 链接：https://github.com/mroderick/PubSubJS 例子： //主容器 var Main = React.c
【react】组件创建和交互步骤和实例
u014458962的专栏
02-16 297
例子来自尚硅谷react视频，相当于笔记整理 link：https://www.bilibili.com/video/av51174155?from=search&seid=11218837597275325699 要做的功能： 在输入框内输入内容，点击add按钮自动添加到下面的列表去，并且清空input 重点是通过这个例子，把如何进行解决react多组件的创建和交互的思路理...
8种React组件间通信方式（类组件+函数组件）
最新发布
Lin_DOUbleP的博客
08-23 3370
本次分享就到这了~笔者为初学者，欢迎各位评论区交流。
react组件通信方式汇总
ebonyzhang
01-09 1万+
父组件向子组件通信 父组件更新组件状态，通过props传递给子组件，子组件得到后进行更新。 Timer 是倒计时子组件，集成在了OrderPay父组件里，父组件向子组件传订单数据参数order对象。如下代码： &amp;amp;amp;lt;Timer order={order} /&amp;amp;amp;gt; //倒计时组件 在子组件里直接通过props获取父组件传递过来的参数，如下： let order = this.props.or...
react中，组件的交互及this.state属性
Sophie_U的博客
02-04 3291
一、React组件是状态机 1.1 状态理解 React的数据流：数据由父节点向下传递到子节点（由外到内传递），如果顶层组件某个prop改变，React会向下传递，重新渲染所有使用过该属性的组件。 react组件是一个状态机，组件都有一个初始状态，通过与用户的交互，使状态发生改变，然后重新渲染UI，让用户界面与数据保持一致。 在传统js中，如果数据发生了变化，我们需要操作都
React中组件通信的几种方式
weixin_34290000的博客
12-10 345
首次发表在个人博客 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1. 父组件向子组件通信 React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息Child.jsx import React from 'react';...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值