（六）函数式组件使用 props
# 🐷一、函数式组件使用 props
state 和 refs 需要使用 this 点出自己实例身上的属性，而函数式组件因为开启了严格模式，所以他没有自己的 this 所以不能使用 state 和 refs 但是函数可以接收参数，所以可以使用 props
- 无法获取实例，组件报错
function Person() {
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
ReactDOM.render(<Person name={'张三'} sex={'男'} age={18}/>, document.getElmentById('test'))- 函数接收
props参数
function Person(props) {
console.log(props)
const {name, sex, age} = props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
ReactDOM.render(<Person name={'jerry'} sex={'女'} age={18}/>, document.getElmentById('test'))
# 二、函数式组件对 props 进行类型限制，和默认值赋值
function Person(props) {
console.log(props)
const {name, sex, age} = props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
// 限制
Person.propsTypes = {
name: PropsTypes.string.isRequired, // 限制string 必传
sex: PropsTypes.string,
age: PropsTypes.number
}
// 默认值
Person.defaultProps = {
sex: '男',
age: 18
}
ReactDOM.render(<Person name={'jerry'} sex={'女'} age={18}/>, document.getElmentById('test'))本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023年1月18日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
