锐客网

  1. 首页 > 睿知 > it技术 > >

React|React组件三大核心属性(二)——props

前端reactjavascriptreact.js

每个组件对象都会有 props(properties 的简写 属性。组件标签的所有属性都保存在 props 中。
实例 需求：自定义用来显示一个人员信息的组件
  1. 姓名必须指定，且为字符串类型；
  2. 性别为字符串类型，如果性别没有指定，默认为男；
  3. 年龄为字符串类型，且为数字类型，默认值为18；
创建组件 内部读取某个属性可以采用 this.props.name
class Person extends React.Component{ render(){ const {name,age,sex} = this.props return (
  • 姓名：{name}
  • 性别：{sex}
  • 年龄：{age+1}
) } }

通过标签传入属性
  1. 正常传入
ReactDOM.render(, document.getElementById('test'))

  1. 扩展属性：将对象的所有属性通过 props 传递
const p = {name:'老刘', age:18, sex:'女'} ReactDOM.render(, document.getElementById('test'))

对 props 中的属性值进行类型限制和必要性限制
  1. 第一种方式 (React v15.5 开始已弃用)：
Person.propTypes = { name: React.PropTypes.string.isRequired, age: React.PropTypes.number }

  1. 第二种方式（新）：使用 prop-types 库进限制（需要引入 prop-types 库 ）
Person.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number. }

默认属性值
Person.defaultProps = { age: 18, sex:'男' }

【React|React组件三大核心属性(二)——props】上面的限制以及默认值，都可以通过 static 关键字写进 Person 类内。
比如：
class Person extends React.Component{ static propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number. } static defaultProps = { age: 18, sex:'男' } render(){ const {name,age,sex} = this.props return (
  • 姓名：{name}
  • 性别：{sex}
  • 年龄：{age+1}
) } }

    推荐阅读


    上一篇：react|React 组件与组件实例的三大属性

    下一篇：reactjs|react组件实例对象的三大核心（state,props,refs）