10、React系列之 props属性

TigerChain
2,704 阅读7分钟

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

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、基本用法

<Component data="测试props"/>

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

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

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

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

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

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

具体看browserify这一节:www.jianshu.com/p/93a112dc6…

(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')
);

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

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

当然我们也可以使用watchify

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

props_single.png

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

3、多个值的传递

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

1、普通方法

  • 1、修改index.js

props_mutil.png

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

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

props_propsmodify.png

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

render: function() {
		return (
			<div>
				{this.props.data}
				//新增加的代码
				<br/>
				{this.props.data2}
			</div>
		);
	}
  • 3、刷新浏览器看效果

props_mutl_result.png

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

2、推荐方法

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

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

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

  • 1、修改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')
);
  • 2、修改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>
		);
	}
  • 3、刷新浏览器，看结果

props_jsx_extends_result.png

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

test()方法的启示

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

3、默认属性

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

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

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

4、属性校验

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

1、使用方法

  • 1、在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,
  ....
}
  • 2、在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,
  ....
  }

2、实例代码

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

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

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

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

propstype.png

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

5、关于this.props.children

1、this.props.children属性

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

2、不多说，直接上代码

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

  • 1、在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;
  • 2、修改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

  • 3、查看结果

props_child_result.png

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

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

本章demo的地址

github.com/githubchen0… 如果大家喜欢，可以给个 star 鼓励一下

ps:此demo使用的是yarn+webpack写的，以后的demo没有特别说明都是基于yarn+webpack去编写了,并且使用的ES6语法

avatar
文章
阅读
粉丝