携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

props 深入

children 属性

• children 属性：表示组件标签的子节点。当组件标签有子节点时，props 就会有该属性。
• children 属性与普通的 props 一样，值可以是任意值（文本，React元素、组件、甚至是函数）

// 导入ract
import React from 'react'
import ReactDOM from 'react-dom'

const App = (props) => {
  console.log(props)
  return (
    <div className='app'>
      <h1>组件标签的子节点：</h1>
      {props.children}
    </div>
  )
}

// 渲染
ReactDOM.render(<App><p>我是子节点，是一个p标签</p></App>, document.getElementById('root'))

props 校验

• 对于组件来说，props 是外来的，无法保证组件使用者传入什么格式的数据。
• 如果传入的数据格式不对，可能会导致组件内部报错。
• 关键问题：组件的使用者不知道明确的错误原因。

// 导入ract
import React from 'react'
import ReactDOM from 'react-dom'

// A创建App组件
const App = (props) => {
  const arr = props.colors
  const color = arr.map((item, index) => <li key={index}>{item}</li>)
  return (
    <ul> {color}</ul>
  )
}

// B使用App组件
ReactDOM.render(<App colors={20} />, document.getElementById('root'))

报错：

这时，我们就可以使用 props 校验。

• props 校验：允许在创建组件的时候，就指定 props 的类型、格式等。
• 作用：捕获使用组件时因为 props 导致的错误，给出明确的错误提示，增加组件的健壮性。

App.propTypes = {
    colors: PropTypes.array
}

使用步骤：

• 安装包 prop-types：yarn add prop-types / npm i props-types
• 导入 prop-types 包
• 使用组件名.propTypes = {} 来给组件的 props 添加校验规则
• 校验规则通过 PropTypes 对象来指定

// 导入ract
import React from 'react'
import ReactDOM from 'react-dom'

// 导入prop-types
import PropTypes from 'prop-types'

// A创建组件
const App = (props) => {
  const arr = props.colors
  const color = arr.map((item, index) => <li key={index}>{item}</li>)
  return (
    <ul> {color}</ul>
  )
}

// 添加校验规则
App.propTypes = {
  colors: PropTypes.array
}

// B使用组件
ReactDOM.render(<App colors={['red', 'blue']} />, document.getElementById('root'))

约束规则：

1. 常见类型：array、bool、func、number、object、string
2. React 元素类型：element
3. 必填项：isRequired
4. 特定结构的对象：shape({ })

// 常见类型
optionalFunc: PropTypes.func
//必选
requiredFunc: PropTypes.func.isRequired
// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
}),

具体参考官方：reactjs.org/docs/typech…

props 的默认值

场景：分页组件 -> 每页显示条数

// 导入ract
import React from 'react'
import ReactDOM from 'react-dom'

const App = (props) => {
  console.log(props)
  return (
    <div>
      <h1>此处展示props的默认值：{props.pageSizes}</h1>
    </div>
  )
}

// 添加默认值
App.defaultProps = {
  pageSizes: 10
}

// 如果此处不传入pageSizes时，页面显示默认值10；如果传入pageSizes为20，页面显示20
ReactDOM.render(<App pageSizes={20} />, document.getElementById('root'))