React组件三大属性之 props
React组件三大属性之 props
理解
1) 每个组件对象都会有props(properties的简写)属性
2) 组件标签的所有属性都保存在props中
作用
1) 通过标签属性从组件外向组件内传递变化的数据
2) 注意: 组件内部不要修改props数据
编码操作
1) 内部读取某个属性值
this.props.propertyName
2) 对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
3) 扩展属性: 将对象的所有属性通过props传递
<Person {...person}/>
4) 默认属性值
Person.defaultProps = {
name: 'Mary'
}
5) 组件类的构造函数
constructor (props) {
super(props)
console.log(props) // 查看所有属性
}
问题: 请区别一下组件的props和state属性
1) state: 组件自身内部可变化的数据
2) props: 从组件外部向组件内部传递数据, 组件内部只读不修改
例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"></script> <script src="../js/prop-types.js"></script> </head> <body> <div id="test1"></div> <hr> <div id="test2"></div> <script type="text/babel"> /* 需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明 1). 如果性别没有指定, 默认为男 2). 如果年龄没有指定, 默认为18 */ //1、定义组件 function Person(props) { return ( <ul> <li>姓名: {props.name}</li> <li>性别: {props.sex}</li> <li>年龄: {props.age}</li> </ul> ) } // 指定属性的默认值 Person.defaultProps = { sex: '男', age: 18 } //指定属性值和类型的必要性 Person.propTypes={ name: PropTypes.string.isRequired, age: PropTypes.number } //定义一个person const person = { name: 'Tom', sex: '女', age: 18 } const person2 = { name: 'jack' } //2、渲染组件标签 ReactDOM.render(<Person {...person}/>,document.getElementById('test1')) ReactDOM.render(<Person name={person2.name} />,document.getElementById('test2')) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"></script> <script src="../js/prop-types.js"></script> </head> <body> <div id="test1"></div> <hr> <div id="test2"></div> <script type="text/babel"> /* 需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明 1). 如果性别没有指定, 默认为男 2). 如果年龄没有指定, 默认为18 */ //1、定义组件 class Person extends React.Component { render() { console.log(this) return ( <ul> <li>姓名: {this.props.name}</li> <li>性别: {this.props.sex}</li> <li>年龄: {this.props.age}</li> </ul> ) } } // 指定属性的默认值 Person.defaultProps = { sex: '男', age: 18 } // 对标签属性进行限制 Person.propTypes = { name: PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number } //定义一个person const person = { name: 'Tom', sex: '女', age: 18 } const person2 = { name: 'jack' } //2、渲染组件标签 ReactDOM.render(<Person {...person}/>,document.getElementById('test1')) ReactDOM.render(<Person name={person2.name} />,document.getElementById('test2')) </script> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2019-03-18 YARN学习总结之架构
2019-03-18 HDFS读写流程
2019-03-18 HDFS学习总结之API交互