【React】组件实例的三大属性——props

props和state的区别

porps:父组件向子组件传递的参数,用于组件之间的通信,值不可变
state:组件内部的状态,值可变

1.props的用法

class Person extends React.Component {
  render() {
    const { name, age, sex } = this.props
    return (
      <ul>
        <li>姓名:{name}</li>
        <li>性别:{sex}</li>
        <li>年龄:{age}</li>
      </ul>
    )
  }
}
ReactDOM.render(<Person age={18} sex="男" name="张三" />, document.getElementById('test1'))

// 组件的属性支持解构赋值
const data = { name: '小二', sex: '女', age: 15}
ReactDOM.render(<Person {...data} />, document.getElementById('test2'))

2.使用prop-types限制数据的类型的必要性

  1. 引入prop-types库<script type="text/javascript" src="../js/prop-types.js"></script>
  2. static propTypes是固定写法,react会识别到
class Person extends React.Component {
/* 
  2.写在类里面必须使用static声明,因为propTypes和defaultProps是挂在类自身的,而不是实例对象上.
*/
static propTypes = {
  name: PropTypes.string.isRequired, // 必传
  age: PropTypes.number, // 不传不会报错,但是传了非数字的值会报错
  sex: PropTypes.string
}

render() {
  const { name, age, sex } = this.props
  return (
    <ul>
      <li>姓名:{name}</li>
      <li>性别:{sex}</li>
      <li>年龄:{age}</li>
    </ul>
  )
}
}

ReactDOM.render(<Person sex="男" name="张三" />, document.getElementById('test'))

3.设置props的默认值

  1. 同样是使用prop-types库
class Person extends React.Component {
// 指定默认标签属性值
static defaultProps = {
  sex: '男',
  age: 3
}

render() {
  const { name, age, sex } = this.props
  return (
    <ul>
      <li>姓名:{name}</li>
      <li>性别:{sex}</li>
      <li>年龄:{age}</li>
    </ul>
  )
}
}

ReactDOM.render(<Person sex="男" name="张三" />, document.getElementById('test'))

4.函数式组件使用props

function Person(props) {
  const {name, age, sex} = props
  return (
    <ul>
      <li><mark>姓名:</mark> {name}</li>
      <li>年龄: {age}</li>
      <li>性别: {sex}</li>
    </ul>
  )
}

/* 
  函数定义的组件的props限制和默认值设置,只能写在函数外面
*/
// 对标签属性进行类型、必要性的限制
Person.propTypes = {
  name: PropTypes.string.isRequired, // 必传
  age: PropTypes.number, // 不传不会报错,但是传了非数字的值会报错
  sex: PropTypes.string
}
// 指定默认标签属性值
Person.defaultProps = {
  sex: '男',
  age: 3
}

ReactDOM.render(<Person name="张三" />, document.getElementById('test'))
上一篇:C#学习日志 day 5 ------ windows phone 8.1真机调试手机应用


下一篇:Java并发包源码学习之AQS框架(三)LockSupport和interrupt