版权声明:本文为博主原创文章,未经博主允许不得转载。

PS:转载请注明出处
作者:TigerChain
地址:http://www.jianshu.com/p/fa81cebac3ef
本文出自TigerChain简书

React系列教程

1、React之props属性

我们想要在组件之间进行传值,那么props属性就起到了这个作用,在React中props和state是两个非常非常非常重要的属性一定要掌握这两个。(以下都是使用ES5的写法,没有特殊说明的都是使用ES5写法)

Note:属性是用于设置默念值,不改变的值使用props,而改变的值我们要使用state,我们后面章节再说

2、React之props属性基本用法

1、基本用法

  1. <Component data="测试props"/>

在Component组件中使用this.props.data就可以取得data中的值(其中data这个字段可以任意指定但是组件中的和获取props要对应就好了)

2、废话不多说,直接上例子

在这一节中我们使用browserify来管理js代码,如果不知道browserify可以查看此节

这里假设你把browserify环境都搭建起来了

PS:本文最后的Demo是使用webpack+yarn来完成,这也是主流的方式,但是你掌握了browserify也算是多掌握一门技术。

(1)、我们新建props文件夹,并且搭建browserify环境

具体看browserify这一节:http://www.jianshu.com/p/93a112dc62b9

(2)、新建index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>props用法</title>
  6. </head>
  7. <body>
  8. <div id="example"></div>
  9. <script src="bundle.js"></script>
  10. </body>
  11. </html>

(3)、新建component文件夹(在这里我们体验一下组件化的思想),在component文件夹中新建一个Props.js(这就是一个组件)

  1. //引入所需要的类
  2. var React = require('react');
  3. var Propos = React.createClass({
  4. render: function() {
  5. return (
  6. <div>
  7. {this.props.data}
  8. </div>
  9. );
  10. }
  11. });
  12. //将此类暴漏出去 供个部使用
  13. module.exports = Propos;

(4)在props目录下新建index.js文件,并且使用require引入Props组件

  1. // index.js
  2. var React = require('react');
  3. var ReactDOM = require('react-dom');
  4. var Props = require('./component/Props.js') ;
  5. ReactDOM.render(
  6. <Props data="我是props属性"/>,
  7. document.getElementById('example')
  8. );

5、我们使用browserify来将index.js转化成bundle.js

  1. browserify -t [ babelify ] index.js -o bundle.js

当然我们也可以使用watchify

6、最后我们在浏览器中查看结果

 
props_single.png

Note:props属性不仅可以从爸爸传递给儿子组件,也可以从儿子传递给孙子,可以一直这样传递下去,按需传递

3、多个值的传递

在上面我们把父组件属性传递到子组件了,这是一个属性的传递,那么如何传递多个属性值呢,大家可能想到了,那就定义多个属性值就好了么。步骤如下:

1、普通方法

  • 1、修改index.js
 
props_mutil.png

从图可以看出我们只是修改了红色框中的Props组件中的属性值

  1. <Props data={"我是props属性1"} data2={"我是属性值2"} />
  • 2、修改Props.js来接收传递过来的值
 
props_propsmodify.png

同样我们看只是修改了红色框听部分,就是接收了props属性值并且显示

  1. render: function() {
  2. return (
  3. <div>
  4. {this.props.data}
  5. //新增加的代码
  6. <br/>
  7. {this.props.data2}
  8. </div>
  9. );
  10. }
  • 3、刷新浏览器看效果
 
props_mutl_result.png

从以上的结果我们确实收到了多个参数值,但是有一个问题,如果有十个参数,我就得写十个字段属性,20个呢,这有点扯淡吧, 有没有什么好的办法呢?我能这样问,答案是肯定的,下面我们来改造一下上面的代码

2、推荐方法

我们使用JSX的扩展语法来传递属性值,也就是...语法

  1. return <Commponent{...this.props}more="values" />;

我们废话不多说,我们直接来上代码看效果,还是在上面代码的基础上修改

  • 1、修改index.js
 
props_jsx_extend.png

从图中我们可以看到,我添加了图中红色框中的部分,在这里我偷偷也添加了一个test()方法,也就是说明了props不仅仅可以传递参数,对象也可以是一个方法,以下是修改的代码

  1. //定义一个属性的对象
  2. var propsData = {
  3. name:"JunJun",
  4. address:"china",
  5. height:"175cm"
  6. }
  7. //添加一个测试方法
  8. function test(param){
  9. //把传递过来的参数重新拼接臧一个新的字符串
  10. let newParsm = param.concat("junjun") ;
  11. console.log(newParsm);
  12. }
  13. ReactDOM.render(
  14. <Props data={{...propsData}} data2={"我是属性值2"} data3={test}/>,
  15. document.getElementById('example')
  16. );
  • 2、修改Props.js
 
modify_props.png

这里也没有什么好说的,我们就是把传递过来的属性调用了一下,让其工作而已,以下是修改过的代码

  1. //测试方法点击事件
  2. handlerClick:function(){
  3. {this.props.data3("我是测试方法:")}
  4. },
  5. render: function() {
  6. return (
  7. <div>
  8. 名字:{this.props.data.name}
  9. <br/>
  10. 地址:{this.props.data.address}
  11. <br />
  12. 身高:{this.props.data.height}
  13. <br />
  14. {this.props.data2}
  15. <br />
  16. <button onClick={this.handlerClick}>测试方法</button>
  17. </div>
  18. );
  19. }
  • 3、刷新浏览器,看结果
 
props_jsx_extends_result.png

在这里我打开了chrome的调试工具,我们可以看到,当我们点击测试方法按钮的时候就会调用index.js中的test()方法,打印出了我是测试的信息,并且从浏览器的结果中我们也可以看出,使用JSX扩展语法...传递过来的属性都被接收到了。这样是不是比前面一个一个属性参数的传递方便多了,代码也规整了。

test()方法的启示

很好了说明了,儿子组件如何调用父亲的方法,也是一种将父亲方法暴漏的方式

3、默认属性

细心的朋友可能早都发现了,在多个值的传递中我们发现Props.js对应的图片中有这么一段代码

  1. //设置默认属性,返回一个json对象
  2. getDefaultProps(){
  3. return {
  4. data:"默认"
  5. }
  6. },

这段代码是什么意思呢?这段代码其实是为属性设置默认值,也就是说一个组件没有传递任何属性的时候,我们调用了this.props.data就会使用默认的属性值。注意这个方式是在ES5写法中使用的,ES6写法会有所不同

4、属性校验

在React中属性是可以校验的,比如,我们要记录一个人的信息,名字是必须的并且是一个字符串,年龄是一个数字,爱好是一个数组等等这些要求和规范在React中使用propTypes

1、使用方法

  • 1、在ES5中使用方法
  1. propTypes:{
  2. // 可以声明 prop 为指定的 JS 基本类型。默认
  3. // 情况下,这些 prop 都是可传可不传的。
  4. optionalArray: React.PropTypes.array,
  5. optionalBool: React.PropTypes.bool,
  6. optionalFunc: React.PropTypes.func,
  7. optionalNumber: React.PropTypes.number,
  8. optionalObject: React.PropTypes.object,
  9. optionalString: React.PropTypes.string,
  10. optionalSymbol: React.PropTypes.symbol,
  11. ....
  12. }
  • 2、在ES6中使用方法
  1. MyComponent.propTypes = {
  2. // You can declare that a prop is a specific JS primitive. By default, these
  3. // are all optional.
  4. optionalArray: React.PropTypes.array,
  5. optionalBool: React.PropTypes.bool,
  6. optionalFunc: React.PropTypes.func,
  7. optionalNumber: React.PropTypes.number,
  8. optionalObject: React.PropTypes.object,
  9. optionalString: React.PropTypes.string,
  10. optionalSymbol: React.PropTypes.symbol,
  11. ....
  12. }

2、实例代码

  • 1、我们在Props.js中添加以下代码
  1. //规范传递过来的属性范围
  2. propTypes:{
  3. //年龄必须为数字
  4. age: React.PropTypes.number,
  5. },

以上规范了age属性必须是数字类型

  • 2、修改index.js中的ReactDOM.render()方法
  1. ReactDOM.render(
  2. <Props data={{...propsData}} age={"10"} data3={test()}/>,
  3. document.getElementById('example')
  4. );

这们这里估计给age属性传了一个字符串"10",我们来看看结果

 
propstype.png

我们看到了浏览器报了一个警告,意思就是说age属性需要一个数字,你传了一个字符串,这就校验了props属性,对于这个例子我们只需要把age属性传递成数字即可解决掉警告问题

5、关于this.props.children

1、this.props.children属性

this.props属性和组件的属性值是一一对应的,但是有一个例外就是this.props.children,它表示的是所有子节点的属性

2、不多说,直接上代码

我们在上面的基础上改代码

  • 1、在component中新建PropsChildrenjs
  1. var React = require('react');
  2. var PropsChildren = React.createClass({
  3. /**
  4. * 渲染每个元素
  5. * @return {[type]} [description]
  6. */
  7. renderList(){
  8. return(
  9. React.Children.map(this.props.children, function (child) {
  10. return <li>{child}</li>;
  11. }));
  12. },
  13. render: function() {
  14. return (
  15. <div>
  16. <br />
  17. 遍历取提this.props.children的值
  18. <ul>
  19. {this.renderList()}
  20. </ul>
  21. </div>
  22. );
  23. }
  24. });
  25. module.exports = ProposChildren;
  • 2、修改Props.js
  1. //引入所需要的类
  2. var React = require('react');
  3. var ProposChildren = require('./ProposChildren.js') ;
  4. var Propos = React.createClass({
  5. /**
  6. * 用来设置默认值
  7. * @return {[type]} [description]
  8. */
  9. getDefaultProps(){
  10. return {
  11. data:"默认"
  12. }
  13. },
  14. //规范传递过来的属性范围
  15. propTypes:{
  16. //年龄必须为数字
  17. age: React.PropTypes.number,
  18. },
  19. handlerClick:function(){
  20. {this.props.data3("我是测试方法:")}
  21. },
  22. render: function() {
  23. return (
  24. <div>
  25. 名字:{this.props.data.name}
  26. <br/>
  27. 地址:{this.props.data.address}
  28. <br />
  29. 身高:{this.props.data.height}
  30. <br />
  31. 年龄:{this.props.age}
  32. <br />
  33. <button onClick={this.handlerClick}>测试方法</button>
  34. //新添加的部分
  35. <PropsChildren>
  36. <p>我是p标签</p>
  37. <h4>我是h4</h4>
  38. <button>我是button</button>
  39. <label>我是label</label>
  40. <text>我是文本组件text</text>
  41. </PropsChildren>
  42. </div>
  43. );
  44. }
  45. });
  46. module.exports = Props;

修改的部分是

 
propos_children.png
  • 3、查看结果
 
props_child_result.png

从图中我们可以知道我们就遍历(使用this.props.children)取得了标签的属性值

到此这止我们就介绍完了props属性

本章demo的地址

https://github.com/githubchen001/react-lesson/tree/master/lesson02/08-props 如果大家喜欢,可以给个 star 鼓励一下

React系列之--props属性的更多相关文章

  1. 【React系列】Props 验证

    Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效.当向 props 传入无效 ...

  2. 从 0 到 1 实现 React 系列 —— 2.组件和 state|props

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  3. 学习React系列(十)——Render Props

    解决问题:将行为封装,供多个组件使用(在多个组件之间分享某段代码) 组件中的props属性中包含一个"render"属性(该属性为一个返回值为元素的方法),然后在该组件的rende ...

  4. React(六)Props属性

    state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...

  5. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  6. react系列从零开始-react介绍

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...

  7. 从 0 到 1 实现 React 系列 —— 1.JSX 和 Virtual DOM

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  8. 从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽

    本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) ...

  9. 从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

随机推荐

  1. hdu 2145(迪杰斯特拉)

    zz's Mysterious Present Time Limit: 10000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java ...

  2. Linux一些防攻击策略

    来自http://www.imooc.com/learn/344

  3. ZOJ 3593.One Person Game-扩展欧几里得(exgcd)

    智障了,智障了,水一水博客. 本来是个水题,但是for循环遍历那里写挫了... One Person Game Time Limit: 2 Seconds      Memory Limit: 655 ...

  4. 在C#用进程打开cmd与直接手动打开cmd是不一样的

    网上找不着答案,想了一下觉得可能是不同的用户,用set看了一下环境变量果然是不同用户,要改一下 按以下方法改: http://www.cnblogs.com/babycool/p/3569183.ht ...

  5. Wannafly交流赛1 A 有理数[模拟/分类讨论]

    链接:https://www.nowcoder.com/acm/contest/69/A来源:牛客网 题目描述 有一个问题如下: 给你一个有理数v,请找到小于v的最大有理数. 但这个问题的答案对于任意 ...

  6. 站点部署,IIS配置优化指南

    目录 一. 二. 三. 四. 五. 六. 七.       安全性 八.       多服务器IIS集中化管理web 通常把站点发布到IIS上运行正常后,很少会去考虑IIS提供的各种参数,如何配置才是 ...

  7. ActiveMQ 权限(二)

    在 ActiveMQ 权限(一) 配置了对消息队列的权限,以下设置完成消息的权限,比如只接受某ip的消息. 两步完成, 第一步:继承接口org.apache.activemq.security.Mes ...

  8. php 经验之谈

    导出excel中文名乱码(保存文件名): hpexcel导出Excel文件时有两个主要的过程: 1.定义文件名 2.填充Excel数据 这两个过程中可能会出现一些乱码问题,下面我来说一下解决办法: 解 ...

  9. 串口调试利器--Minicom配置及使用详解

    因为现在电脑基本不配备串行接口,所以,usb转串口成为硬件调试时的必然选择.目前知道的,PL2303的驱动是有的,在dev下的名称是ttyUSB*. Minicom,是Linux下应用比较广泛的串口软 ...

  10. Docker 容器网络

    默认网络 当安装docker时,它会自动创建3个网络.可以使用docker network ls 来查看.   zane@zane-V:~$ docker network ls NETWORK ID ...