定义
用于接收上层组件传入的参数的对象！
?
DEMO
这里是一个简单的传值到组件内部的demo：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
</head>
<body>
<!--react基础库-->
<script src="https://cdnjs.cloudflare测试数据/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare测试数据/ajax/libs/react/0.14.3/react-dom.js"></script>
<!--bable转换库，ES语法以及Jax语法的转换-->
<script src="https://cdnjs.cloudflare测试数据/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div ></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测试数据/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare测试数据/ajax/libs/react/0.14.3/react-dom.js"></script>
<!--bable转换库，ES语法以及Jax语法的转换-->
<script src="https://cdnjs.cloudflare测试数据/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div ></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
?
查看更多关于【React】react学习笔记04-React组件对象的三大属性-属性值【props】的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did222519