这是我参与「第五届青训营 」伴学笔记创作活动的第3天
需求*:* 自定义用来显示一个人员信息的组件
1. 姓名必须指定，且为字符串类型；
2. 性别为字符串类型，如果性别没有指定，默认为男
3. 年龄为字符串类型，且为数字类型，默认值为18
理解
每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中
作用
通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据
注意
⚠️ ES6语法中
三点运算符不能展开一个对象。但是可以复制一个对象：用大括号包着 {...person}
⚠️ React语法中
再看一下我们上面的代码 `` ，现在的 {} 和 ES6表达的 是一个意思吗？
当然不是，现在的 {}表示的是我要写 js代码了。 所以我们传递的参数就是 ...p。
这是因为经过了Babel和react的处理。且只适用于标签属性的传递
⚠️ props是只读的
props 是只读的。当我们再去修改 props 中的值时会报错。
⚠️ 写到类的内部 （static关键字）
defaultProps、propTypes都是在给类的自身加属性。那么能给它们写到类的内部吗？ 将 defaultProps、propTypes 剪切到类的内部，将 Person.propTypes 改成 static 关键字。有了static关键字，就不会再加给类的实例，而是加给类。
类式组件使用props
<script type="text/babel">
//创建组件
class Person extends React.Component{
constructor(props){
//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
// console.log(props);
super(props)
console.log('constructor',this.props);
}
//对标签属性进行类型、必要性的限制
static propTypes = {
name:PropTypes.string.isRequired, //限制name必传，且为字符串
sex:PropTypes.string,//限制sex为字符串
age:PropTypes.number,//限制age为数值
}
//指定默认标签属性值
static defaultProps = {
sex:'男',//sex默认值为男
age:18 //age默认值为18
}
render(){
// console.log(this);
const {name,age,sex} = this.props
//props是只读的
//this.props.name = 'jack' //此行代码会报错，因为props是只读的
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age+1}</li>
</ul>
)
}
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
</script>
函数式组件使用props
<script type="text/babel">
//创建组件
function Person (props){
const {name,age,sex} = props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
Person.propTypes = {
name:PropTypes.string.isRequired, //限制name必传，且为字符串
sex:PropTypes.string,//限制sex为字符串
age:PropTypes.number,//限制age为数值
}
//指定默认标签属性值
Person.defaultProps = {
sex:'男',//sex默认值为男
age:18 //age默认值为18
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
</script>
