2.3 组件实例的三大核心属性2: props
-
效果
需求:自定义用来显示一个人员信息的组件
// 1. 创建组件
class Person extends React.Component{
render (){
const {
name, age, sex} = this.props;
// props是只读的
return (
<ul>
<li>姓名:{
name}</li>
<li>性别:{
sex}</li>
<li>年龄:{
age + 1}</li>
</ul>
)
}
}
// 对标签属性进行类型、必要性的限制
Person.propTypes = {
// 字符串必填
name : PropTypes.string.isRequired,
sex : PropTypes.string,
age : PropTypes.number,
speak : PropTypes.func
}
// 指定默认标签属性值
Person.defaultProps = {
sex : '男', // 指定默认值
age : 18
}
// 2. 渲染组件到页面
ReactDOM.render(<Person name="tom" age={
18} sex="女" speak={
speak}/>, document.getElementById('container'))
const p = {
name : 'dd', age: 12, sex:'girl'}
ReactDOM.render(<Person {
...p}/>, document.getElementById('container1'))
- 简写:
// 1. 创建组件
class Person extends React.Component{
constructor(props) {
// 构造器是否接受props,是否传递给super,取决于是否希望在构造器中通过this访问props
console.log(props);
super();
console.log(this.props); // undefined
}
/*
构造函数:
1. 通过this.state 复制对象来初始化内部 state
2. 为事件处理函数绑定事件
*/
// 对标签属性进行类型、必要性的限制
static propTypes = {
// 字符串必填
name : PropTypes.string.isRequired,
sex : PropTypes.string,
age : PropTypes.number,
}
// 指定默认标签属性值
static defaultProps = {
sex : '男', // 指定默认值
age : 18
}
render (){
const {
name, age, sex} = this.props;
// props是只读的
return (
<ul>
<li>姓名:{
name}</li>
<li>性别:{
sex}</li>
<li>年龄:{
age + 1}</li>
</ul>
)
}
}
// 2. 渲染组件到页面
ReactDOM.render(<Person name="tom"/>, document.getElementById('container'))
- 函数式组件
function Person (props){
const {
name, sex, age} = props;
return (
<ul>
<li>姓名:{
name}</li>
<li>性别:{
sex}</li>
<li>年龄:{
age}</li>
</ul>
)
}
// 对标签属性进行类型、必要性的限制
Person.propTypes = {
// 字符串必填
name : PropTypes.string.isRequired,
sex : PropTypes.string,
age : PropTypes.number,
}
// 指定默认标签属性值
Person.defultProps = {
sex : '男', // 指定默认值
age : 18
}
// 2. 渲染组件到页面
ReactDOM.render(<Person name="tom" sex="女" age={
12}/>, document.getElementById('container'))
-
理解
- 每个组件对象都有props属性
- 组件标签的所有属性都保存在props中
-
作用
- 通过标签属性从组件外像组件内传递变化的数据
- 组件内部不要修改props数据
-
编码操作
-
内部读取某个属性值
this.props.name
-
对props中的属性值进行类型限制和必要性限制
需要引入库
<!-- 引入react核心库 --> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <!-- 引入react-dom 用于支持react操作DOM --> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <!-- 引入babel 用于将jsx转为js --> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> <!-- 引入prop-types, 用于对组件标签属性进行限制 --> <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
-
扩展属性:将对象的所有属性通过props传递
-
默认属性值
Person.defaultProps = { age : 18, sex : "男" }
-
组件类的构造函数
constructor(props){ super(props); }
-