React-props

前置条件：基础组件

// 类式组件
class Person extends React.Component {
  render() {
    return (
      <ul>
        <li>{this.props.username}</li>
        <li>{this.props.age}</li>
        <li>{this.props.sex}</li>
      </ul>
    )
  }
}

// 函数式组件
function Person(props) {
  return (
    <ul>
      <li>{props.username}</li>
      <li>{props.age}</li>
      <li>{props.sex}</li>
    </ul>
  )
}

传值

const p = {
  username: 'lisi',
  age: 36,
  sex: '男'
}

// 单个传值
ReactDOM.render(<Person username={p.username} age={p.age} sex={p.sex} />, document.getElementById('root'))

// 批量传值
// 注意：此处的 {...p} 不等同于 拓展运算符
ReactDOM.render(<Person {...p} />, document.getElementById('root'))

定义 props 的类型、是否必须、默认值

定义 props 的类型、是否必须、默认值，在 react@15.5之后的版本需要引入 prop-types 库

注意：如果类型是 function，则需要写成 func

1.在外面定义

// 类式组件
class Person extends React.Component {
  render() {
    return (
      <ul>
        <li>{this.props.username}</li>
        <li>{this.props.age}</li>
        <li>{this.props.sex}</li>
      </ul>
    )
  }
}

// 函数式组件
function Person(props) {
  return (
    <ul>
      <li>{props.username}</li>
      <li>{props.age}</li>
      <li>{props.sex}</li>
    </ul>
  )
}

Person.propTypes = {
  username: PropTypes.string.isRequired,
  age: PropTypes.number,
  sex: PropTypes.string
}

Person.defaultProps = {
  username: 'username',
  age: 18,
  sex: '未知'
}

2.函数式组件不能在内部定义

class Person extends React.Component {
  static propTypes = {
    username: PropTypes.string.isRequired,
    age: PropTypes.number,
    sex: PropTypes.string
  }

  static defaultProps = {
    username: 'username',
    age: 18,
    sex: '未知'
  }

  render() {
    return (
      <ul>
        <li>{this.props.username}</li>
        <li>{this.props.age}</li>
        <li>{this.props.sex}</li>
      </ul>
    )
  }
}