react - 组件间的值传递
父组件向子组件传值
- 父组件通过属性进行传递,子组件通过props获取
//父组件
class CommentList extends Component{
render(){
return(
<div>
<Comment comment={information}/>
</div>
)
}
}
//子组件
class Comment extends Component{
render(){
return(
<div>
<span>{this.props.comment}:</span>
</div>
)
}
}
父组件ComentList引用子组件Comment时设置comment属性传递information,在在组件Comment中通过this.props.comment获取到information值
子组件向父组件传值
- 通过回调进行传递数据
//父组件
class CommentApp extends Component{
constructor(){
super();
this.state = {comments:[]}
}
printContent(comment){
this.setState({comment});
}
render(){
return (
<div>
<CommentInput onSubmit={this.printContent.bind(this)} />
</div>
)
}
}
//子组件
class CommentInput extends Component{
constructor(){
super();
this.state = {
usrName:'',
content:''
};
}
submit(){
if(this.props.onSubmit){
var {usrName,content} = this.state;
this.props.onSubmit({usrName,content})
}
this.setState({content:''});
}
render(){
return(
<div>
<div>
<span>用户名:</span>
<div className="usrName">
<input type="text" value={this.state.usrName} />
</div>
</div>
<div>
<span>评论内容:</span>
<div className="content">
<textarea value={this.state.content} />
</div>
</div>
<button onClick={this.submit.bind(this)}>submit</button>
</div>
)
}
}
在父组件CommentApp中调用CommentInput通过属性onSubmit传入函数printContent,在子组件CommentInput中通过this.props.onsubmit调用函数通过参数形式进行值的传递
兄弟组件之间的传值
- 通过相同的父组件进行传递数据
子组件A通过回调函数形式将数据传给父组件,接着父组件通过属性将数据传递给子组件B
- 通过发布/订阅进行传递
在子组件A中 commentDidMount函数中,发布事件,在子组件B中commentDidMount函数中对事件进行监听
- 使用context进行传递
class Parent extends Component(
constructor(props) {
super(props);
this.state = { value: '' }
}
getChildContext(){
return {
this.value = this.state.value;
}
} render() {
return (
<div>
<Child1 />
<Child2 />
</div>
)
}
} class Child1 extends Component{
change:function(){
this.context.value = "heiheihei"
}
render() {
return (
<div>
子组件一
<p>{this.context.value}</p>
</div>
)
}
} class Child2 extends Component{
render() {
return (
<div>
子组件二
<p>{this.context.value}</p>
</div>
)
}
}
context局限性
1. context在react中只是实验阶段未来可能改变
2. 若shouldComponentUpdate中return false会影响context的传值,使子组件无法更新
3. 组件发purComponent也会影响context的传值,影响子组件的更新
- 使用redux对state进行统一管理
react - 组件间的值传递的更多相关文章
- React 组件间通讯
React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父 ...
- vue-cli中父子组件间的变量传递
vue-cli中父子组件间的变量传递 在vue中每一个组件的作用域都是独立的,如果我们想实现父子组件间变量的传递就要另寻他法,而不能直接调用其中的变量. 父级组件向子级组件传递变量 要实现这种效果我们 ...
- React 组件间通信介绍
React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍: 父组件向子 ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- vue.js 同级组件之间的值传递方法(uni-app通用)
vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149
- react组件间的传值方法
关于react的几个网站: http://react.css88.com/ 小书:http://huziketang.mangojuice.top/books/react/ http://www.re ...
- React组件间信息传递方式
组件之间传递信息方式,总体可分为以下5种: 1.(父组件)向(子组件)传递信息 2.(父组件)向更深层的(子组件) 进行传递信息 >>利用(context) 3.(子组件)向(父组件)传 ...
- React组件间的通讯
组件化开发应该是React核心功能之一,组件之间的通讯也是我们做React开发必要掌握的技能.接下来我们将从组件之间的关系来分解组件间如何传递数据. 1.父组件向子组件传递数据 通讯是单向的,数据必须 ...
- vue组件间的数据传递
父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据. App.vue HelloWorld.vue 在子组件部分: 如果需要从父组件获取 logo 的值,就需要使用 p ...
随机推荐
- [Leetcode] 第309题 最佳买卖股票时机含冷冻期
一.题目描述 给定一个整数数组,其中第 i 个元素代表了第 i 天的股票价格 . 设计一个算法计算出最大利润.在满足以下约束条件下,你可以尽可能地完成更多的交易(多次买卖一支股票): 你不能同时参与 ...
- Windows导出文件夹中的文件名列表
在需要导出的目录中,shift+右键,打开cmd或者powershell 运行命令:dir -name >list.txt 刷新文件夹,打开list.txt
- JAVA设计模式-动态代理(Proxy)源码分析
在文章:JAVA设计模式-动态代理(Proxy)示例及说明中,为动态代理设计模式举了一个小小的例子,那么这篇文章就来分析一下源码的实现. 一,Proxy.newProxyInstance方法 @Cal ...
- 读《深入理解Elasticsearch》点滴-基础概念
Lucene的概念 document:以json的形式体现,搜索和搜索的主要载体 field:document的一个部分 term(词项):代表文本中的一个词 token(词条):term在field ...
- SpringBootSecurity学习(12)前后端分离版之简单登录
前后端分离 前面讨论了springboot下security很多常用的功能,其它的功能建议参考官方文档学习.网页版登录的形式现在已经不是最流行的了,最流行的是前后端分离的登录方式,前端单独成为一个项目 ...
- Java Map知识点
1.遍历 java遍历Map的方式有多种,一下以代码示例来说明使用: Map<String, String> tmap = new HashMap<String, String> ...
- j2ee开发之Spring2.5框架学习笔记
Spring 2.5框架学习笔记 1.是一个开源的控制反转IOC和面向切面AOP的容器框架 2.IOC控制反转 public class PersonServiceBean { private Per ...
- MongoDB 学习笔记之 权限管理基础
权限管理基础 MongoDB有很多用户roles,这里只是简单列举下命令的使用,具体的role的含义,请查阅官方文档. https://docs.mongodb.com/manual/referenc ...
- 排坑日记之批量从库IO进程停止
早上刚睁眼,看到了一堆数据库告警的短信,其中一个内容如下: Problem started at 05:02:58 on 2019.10.12 Problem name: Slave is stopp ...
- linux上安装LAMP笔记
B哥最近在参加比赛,需要把一个php项目部署到服务器上,故此在linux上安装LAMP环境,用于部署项目,第一次安装,做点儿笔记记录一下. 安装条件: Redhat或者CentOS linux环境已装 ...