定义
用于接收上层组件传入的参数的对象！
DEMO
这里是一个简单的传值到组件内部的demo：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
</head>
<body>
<!--react基础库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<!--bable转换库，ES语法以及Jax语法的转换-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="content"></div>
<script type="text/babel">
//定义组件
class ComponentA extends React.Component{
//构造函数，在初始化组件的时候会执行
constructor(props){
super(props);
//state的值是从props中获取的上层对象传入的参数
this.state={
name:this.props.name,
age:this.props.age
}
}
//render会进行页面的渲染，当state中数据更新或者发送ajax等事件被监听到都会触发render的刷新
render(){
//从state中取值
const name = this.state.name;
const age = this.state.age;
return(
<div>
<p>名字:{name}</p>
<p>年龄:{age}</p>
</div>
);
}
}
//传入参数name以及age
ReactDOM.render(<ComponentA name={'aaa'} age={20}/>,document.getElementById("content"));
</script>
</body>
</html>
页面展现效果
调用组件时传入的参数name以及age在组件内部初始化时被获取到值，并且在render时被state渲染到页面上：
扩展
1、默认值：
props中的属性是可以设置默认值的：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
</head>
<body>
<!--react基础库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<!--bable转换库，ES语法以及Jax语法的转换-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="content"></div>
<script type="text/babel">
//定义组件
class ComponentA extends React.Component{
//构造函数，在初始化组件的时候会执行
constructor(props){
super(props);
//state的值是从props中获取的上层对象传入的参数
this.state={
name:this.props.name,
age:this.props.age
}
}
//render会进行页面的渲染，当state中数据更新或者发送ajax等事件被监听到都会触发render的刷新
render(){
//从state中取值
const name = this.state.name;
const age = this.state.age;
return(
<div>
<p>名字:{name}</p>
<p>年龄:{age}</p>
</div>
);
}
}
//指定默认值
ComponentA.defaultProps = {
name:'Jerry',
age:30
}
//这里我没有传任何参数
ReactDOM.render(<ComponentA />,document.getElementById("content"));
</script>
</body>
</html>
页面显示效果：
名字:Jerry
年龄:30
2、约束：
给传入的props添加约束，规范数据类型与添加约束：
官网实例：https://react.docschina.org/docs/typechecking-with-proptypes.html
由于博主版本不对，所以测试编译报错，所以了解下就好，使用脚手架搭建的React环境不会存在版本问题。
3、扩展运算符【...】
render(){ //从state中取值 const Student = { name : 'Rose' , level: 100}; const Student2= {...Student}; const array = [1,2,3,4,5]; const array2 = [0, ...array,6] return( <div> <p>名字:{Student2.name}</p> <p>array2:{array2}</p> </div> ); }
渲染结果：
名字:Rose
array2:0123456