【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库
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'))