React系列之--props属性

时间 2019-11-12

标签 react 系列 props 属性栏目 React 繁體版

原文原文链接

版权声明：本文为博主原创文章，未经博主容许不得转载。javascript

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

React系列教程html

一、React之props属性

咱们想要在组件之间进行传值，那么props属性就起到了这个做用,在React中props和state是两个很是很是很是重要的属性必定要掌握这两个。(如下都是使用ES5的写法，没有特殊说明的都是使用ES5写法)java

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

二、React之props属性基本用法

一、基本用法webpack

<Component data="测试props"/>

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

二、废话很少说，直接上例子github

在这一节中咱们使用browserify来管理js代码，若是不知道browserify能够查看此节web

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

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

(1)、咱们新建props文件夹，而且搭建browserify环境

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

(2)、新建index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>props用法</title> </head> <body> <div id="example"></div> <script src="bundle.js"></script> </body> </html>

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

//引入所须要的类 var React = require('react'); var Propos = React.createClass({ render: function() { return ( <div> {this.props.data} </div> ); } }); //将此类暴漏出去 供个部使用 module.exports = Propos;

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

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

五、咱们使用browserify来将index.js转化成bundle.js

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

固然咱们也可使用watchify

六、最后咱们在浏览器中查看结果

props_single.png

Note:props属性不只能够从爸爸传递给儿子组件，也能够从儿子传递给孙子，能够一直这样传递下去，按需传递

三、多个值的传递

在上面咱们把父组件属性传递到子组件了，这是一个属性的传递，那么如何传递多个属性值呢，你们可能想到了，那就定义多个属性值就行了么。步骤以下：

一、普通方法

一、修改index.js

props_mutil.png

从图能够看出咱们只是修改了红色框中的Props组件中的属性值

<Props data={"我是props属性1"} data2={"我是属性值2"} />

二、修改Props.js来接收传递过来的值

props_propsmodify.png

一样咱们看只是修改了红色框听部分，就是接收了props属性值而且显示

render: function() { return ( <div> {this.props.data} //新增长的代码 <br/> {this.props.data2} </div> ); }

三、刷新浏览器看效果

props_mutl_result.png

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

二、推荐方法

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

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

咱们废话很少说，咱们直接来上代码看效果,仍是在上面代码的基础上修改

一、修改index.js

props_jsx_extend.png

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

//定义一个属性的对象 var propsData = { name:"JunJun", address:"china", height:"175cm" } //添加一个测试方法 function test(param){ //把传递过来的参数从新拼接臧一个新的字符串 let newParsm = param.concat("junjun") ; console.log(newParsm); } ReactDOM.render( <Props data={{...propsData}} data2={"我是属性值2"} data3={test}/>, document.getElementById('example') );

二、修改Props.js

modify_props.png

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

//测试方法点击事件 handlerClick:function(){ {this.props.data3("我是测试方法:")} }, render: function() { return ( <div> 名字:{this.props.data.name} <br/> 地址:{this.props.data.address} <br /> 身高:{this.props.data.height} <br /> {this.props.data2} <br /> <button onClick={this.handlerClick}>测试方法</button> </div> ); }

三、刷新浏览器，看结果

props_jsx_extends_result.png

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

test()方法的启示

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

三、默认属性

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

//设置默认属性，返回一个json对象 getDefaultProps(){ return { data:"默认" } },

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

四、属性校验

在React中属性是能够校验的，好比，咱们要记录一我的的信息，名字是必须的而且是一个字符串，年龄是一个数字，爱好是一个数组等等这些要求和规范在React中使用propTypes

一、使用方法

一、在ES5中使用方法

propTypes:{
  // 能够声明 prop 为指定的 JS 基本类型。默认 // 状况下，这些 prop 都是可传可不传的。 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, optionalSymbol: React.PropTypes.symbol, .... }

二、在ES6中使用方法

MyComponent.propTypes = {
  // You can declare that a prop is a specific JS primitive. By default, these // are all optional. optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, optionalSymbol: React.PropTypes.symbol, .... }

二、实例代码

一、咱们在Props.js中添加如下代码

//规范传递过来的属性范围 propTypes:{ //年龄必须为数字 age: React.PropTypes.number, },

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

二、修改index.js中的ReactDOM.render()方法

ReactDOM.render(
 <Props data={{...propsData}} age={"10"} data3={test()}/>, document.getElementById('example') );

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

propstype.png

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

五、关于this.props.children

一、this.props.children属性

this.props属性和组件的属性值是一一对应的，可是有一个例外就是this.props.children，它表示的是全部子节点的属性

二、很少说，直接上代码

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

一、在component中新建PropsChildrenjs

var React = require('react'); var PropsChildren = React.createClass({ /** * 渲染每一个元素 * @return {[type]} [description] */ renderList(){ return( React.Children.map(this.props.children, function (child) { return <li>{child}</li>; })); }, render: function() { return ( <div> <br /> 遍历取提this.props.children的值 <ul> {this.renderList()} </ul> </div> ); } }); module.exports = ProposChildren;

二、修改Props.js

//引入所须要的类 var React = require('react'); var ProposChildren = require('./ProposChildren.js') ; var Propos = React.createClass({ /** * 用来设置默认值 * @return {[type]} [description] */ getDefaultProps(){ return { data:"默认" } }, //规范传递过来的属性范围 propTypes:{ //年龄必须为数字 age: React.PropTypes.number, }, handlerClick:function(){ {this.props.data3("我是测试方法:")} }, render: function() { return ( <div> 名字:{this.props.data.name} <br/> 地址:{this.props.data.address} <br /> 身高:{this.props.data.height} <br /> 年龄:{this.props.age} <br /> <button onClick={this.handlerClick}>测试方法</button> //新添加的部分 <PropsChildren> <p>我是p标签</p> <h4>我是h4</h4> <button>我是button</button> <label>我是label</label> <text>我是文本组件text</text> </PropsChildren> </div> ); } }); module.exports = Props;

修改的部分是

propos_children.png

三、查看结果

props_child_result.png

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

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

本章demo的地址

https://github.com/githubchen001/react-lesson/tree/master/lesson02/08-props 若是你们喜欢，能够给个 star 鼓励一下