React入门---属性(props)-8
Props 和 State对于组件Component是非常重要的两个属性。
区别:State对于模块来说是 自身属性;
Props对于模块来说是 外来属性;
同样的,props也是只作用于当前的组件,绝不影响其他组件;
给组件 <ComponentFooter> 添加props属性和属性值;
例:从父组件index.js给子组件footer.js传送数据:
class Index extends React.Component{
render(){
return(
//里面分别是 头部 主体 底部
<div>
<ComponentHeader/>
<BodyIndex/>
{/*在这里给footer组件,添加props外来属性,不会影响其他组件*/}
<ComponentFooter userId={}/>
</div>
);
}
}
然后在footer组件里面,通过props属性来接收;
export default class ComponentFooter extends React.Component{
render(){
return(
<div>
<h1>这里是底部</h1>
{/*props接收来自index.js的信息,在页面显示*/}
<p>{this.props.userId}</p>
</div>
)
}
运行之后,页面会显示出来123456;
React入门---属性(props)-8的更多相关文章
- React入门---属性(state)-7
state------>虚拟dom------>dom 这个过程是自动的,不需要触发其他事件来调用它. state中文理解:页面状态的的一个值,可以存储很多东西. 学习state的使用: ...
- React系列之--props属性
版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain地址:http://www.jianshu.com/p/fa81cebac3ef本文出自TigerC ...
- React学习:状态(State) 和 属性(Props)
State 与 Props 区别props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法 ...
- React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...
- react入门(2)
接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...
- react入门(4)
首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- React入门简单实践
参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...
随机推荐
- Oracle存储过程的调用和执行
1.什么是存储过程: 用于在数据库中完成特定的操作或者任务.是一个PLSQL程序块,可以永久的保存在数据库中以供其他程序调用. 2.无参存储过程的使用: Normal 0 7.8 磅 0 2 fals ...
- [.NET] 一步步打造一个简单的 MVC 网站 - BooksStore(一)
一步步打造一个简单的 MVC 网站 - BooksStore(一) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore 简介 主 ...
- Eclipse中将含有图片资源的项目打包成jar文件
前言: 最近学了GUI编程和UDP协议,心血来潮想做一个局域网内的聊天软件,前期都还算顺利,直到后来将整个项目打包成jar文件时遇到了困难.如图: 自己设置的图标不见了,但是也没有默认的图标,说明图片 ...
- 深入学习 DUBBO
1.什么是 RPC 协议? RPC 的全称是 Remote Procedure Call 是一种进程间通信方式.它允许程序调用另一个地址空间(通常是共享网络的另一台机器上)的过程或函数,而不用程序员显 ...
- 使用$.post和action或servlet交互 URL出现 http://localhost:8080/../[object%20Object] 错误的问题解决
使用$.post时,如下所示: $.post({ url : "./test/ajaxTest", }); 控制台报:There is no Action mapped for n ...
- Java排序算法之插入排序
基本过程: 每次将待排元素和已经排序好的序列进行比较,按照大小顺序插入进去,重新构造一个新的有序序列. 插入排序算法有种递归的思想在里面,它由N-1趟排序组成.初始时,只考虑数组下标0处的元素,只有一 ...
- Java中集合框架,Collection接口、Set接口、List接口、Map接口,已经常用的它们的实现类,简单的JDK源码分析底层实现
(一)集合框架: Java语言的设计者对常用的数据结构和算法做了一些规范(接口)和实现(实现接口的类).所有抽象出来的数据结构和操作(算法)统称为集合框架. 程序员在具体应用的时候,不必考虑数据结构和 ...
- 淘宝内部分享:怎么跳出MySQL的10个大坑
编者按:淘宝自从2010开始规模使用MySQL,替换了之前商品.交易.用户等原基于IOE方案的核心数据库,目前已部署数千台规模.同时和Oracle, Percona, Mariadb等上游厂商有良好合 ...
- ubuntu中文字符集格式转换
- POI框架实现创建Excel表、添加数据、读取数据
public class TestPOI2Excel {//创建2003版本Excel用此方法 @Test public void testWrite03Excel() throws Exceptio ...