父组件传递给子组件属性时,子组件会通过props进行接收

1. children属性

• 只要子组件标签内有内容，props中就会出现一个children属性
• 子组件标签内的内容可以是任意的，children都可以进行接收
• children只是一个比较特殊的属性，子组件标签上也可以写自定义属性
• 属性值可以是任意类型

父组件

import Son from './components/Son'

<Son title="自定义属性值">内容...</Son>
// 等同于
// <Son children="内容..."></Son>

子组件

render() {
    console.log(this.props)
    return <div>{this.props.children}</div>
  }

2. props验证

步骤:

1. 下载 prop-types 插件 ，并导入prop-types包  yarn add prop-types
2. 使用 组件名.propsTypes = {  }  来给组件的props中的数据添加校验规则
3. 校验规则通过PropTypes对象来指定

类组件

父组件

<Daughter num={100}>内容</Daughter>

 子组件

import React, { Component } from 'react'
// 1. 导入prop-types包,这个PropTypes(P是大写)跟下面的propTypes(p是小写)没啥关系
import PropTypes from 'prop-types'

export default class Daughter extends Component {
  render() {
    return (
      <div>
        {this.props.children} --- {this.props.num}
      </div>
    )
  }
}

// 2. 给组件添加校验
Daughter.propTypes = {
  // 3. 进行校验（通过 prop-types 这个插件进行校验 ）
  num: PropTypes.number,
}

函数式组件

父组件

import React from 'react'
import Demo from './pages/demo.jsx'

export default function App() {
  return (
    <>
      <Demo name="张三" age={24} sex="男" score={100}></Demo>
    </>
  )
}

 子组件

import React from 'react'
import PropTypes from 'prop-types'

export default function demo(props) {
  let { name, age, sex } = props
  return (
    <div>
      <p>
        {name} - {age} - {sex}
      </p>
    </div>
  )
}

// props校验
demo.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  sex: PropTypes.string.isRequired,
  // 也可以自定义校验规则  peops是所有接收过来的数据，propsName是字段名，componentName组件名
  score: function (props, propsName, componentName) {
    if (props[propsName] < 60) {
      return new Error('成绩不合格')
    }
  },
}

// 设置默认值
demo.defaultProps = {
  name: '默认值',
  age: 25,
  sex: '男',
}

常见规则

• 常见类型: array    bool    func    number    object     string
• React元素类型:  element
• 是否必填:  isRequired
• 特定结构的对象:  shape({  })   也就是指定对象里面字段的规则，可以指定一个，也可以指定多个
• 也可以自定义校验规则(见上面的例子)

举例：

父组件

state = {
  car: {
    brand: '五菱',
    price: 9999,
  },
}

<Daughter num={100} car={this.state.car}>内容</Daughter>

子组件

import React, { Component } from 'react'
import propTypes from 'prop-types'

export default class Daughter extends Component {
  render() {
    return (
      <div>
        {this.props.children} --- {this.props.num}
        <p>
          {this.props.car.brand}---{this.props.car.price}
        </p>
      </div>
    )
  }
}

// 给组件添加校验.也可以添加到类里面,但是要加static修饰(静态成员只能通过构造本身访问)
Daughter.propTypes = {
  num: propTypes.number.isRequired,
  car: propTypes.shape({
    brand: propTypes.string.isRequired,
    price: propTypes.number.isRequired,
  }),
}

3. 指定props默认值

通过组件名.defaultProps = {  }来进行赋值默认值

Daughter.defaultProps = {
  num: 0,
}