React 组建进阶、children 属性、props 校验-场景使用、 props 校验-规则说明、props 校验-默认值、defaultProps、PropTypes

React 组建进阶

children 属性

学习目标: 掌握 props 中 children 属性的用法

children 属性是什么
表示该组件的子节点,只要组件内部有子组件节点,props 中就有该属性
children 可以是什么

  1. 普通文本
  2. 普通标签元素
  3. 函数
  4. JSX

props 校验-场景使用

学习目标: 掌握组件 props 的校验写法,增加组件的健壮性

对于组件来说,props 是由外部传入的,我们无法保证组件使用者传入什么格式的数据,如果传入的数据格式不对,就有可能导致组件内部错误,组件使用者可能报错了也不知道为什么 > 例:

const List = (props) => {
  const arr = props.colors
  const lis = arr.map((item, index) => <li key={index}>{item.name}</li>)
}
;<list colors={19} />

面对这样的问题,我们可以使用 props 校验解决
实现步骤:

  1. 安装校验包 yarn add prop-type
  2. 导入prop-types
  3. 使用组件名。propTypes = {}给组件添加校验规则
    代码实现:
import React from 'react'
import PropTypes from 'prop-types'
function Test({ list }) {
  return (
    <div>
      {list.map((item) => (
        <p key={item}>{item}</p>
      ))}
    </div>
  )
}
Test.propTypes = {
  list: PropTypes.array,
}
class App extends React.Component {
  state = {}
  render() {
    return (
      <>
        <Test list={[1, 2, 3]} />
      </>
    )
  }
}
export default App

props 校验-规则说明

学习目标: 掌握 props 常见的校验规则
四种常见结构:

  1. 常见类型:array、bool、func、number、object、string
  2. React 元素类型:element(jsx)
  3. 必填项:isRequired
  4. 特定的结构对象: shape()
    核心代码:
//常见类型
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
//必填
optionalFunc : PropTypes.func.isRequired
//特定结构对象
optionalobjectwithShape: PropTypes.shape({
  color:PropTypes.string,
  fontSize:PropTypes.number
})

官方文档地址:https://reactjs.org/docs/typechecking-with-proptypes.html

props 校验-默认值

学习目标: 掌握如何给组件的 props 设置默认值

通过defaultProps可以给组件的 Props 设置默认值,在为传入 props 的时候生效

1.函数组件

  1. 使用 defaultProps
import React from 'react'
//导入defaultprops
import PropTypes from 'prop-types'
function Test({ list }) {
  return (
    <div>
      {list.map((item) => (
        <p key={item}>{item}</p>
      ))}
    </div>
  )
}
//设置默认值
Test.defaultProps = {
  list: [1, 2, 3], //如果传入list,就以传入的list为主,如果不传入list就默认list为[1,2,3]
}
class App extends React.Component {
  render() {
    return (
      <>
        <Test />
      </>
    )
  }
}
export default App
  1. 使用函数参数默认值(推荐)
    注意:函数组件在新版本不在推荐使用 defaultProps 添加默认值,而是推荐使用函数参数默认值来添加默认值
function Test({ list = [1, 2, 3] }) {
  return (
    <div>
      {list.map((item) => (
        <p key={item}>{item}</p>
      ))}
    </div>
  )
}

2.类组件

  1. 使用 defaultProps
import React from 'react'
import PropTypes from 'prop-types'
class Test extends React.Component {
  render() {
    return <div>{this.props.list}</div>
  }
}
Test.defaultProps = {
  list: [1, 2, 3],
}
class App extends React.Component {
  render() {
    return (
      <>
        <Test />
        <Test list={[4, 5, 6]} />
      </>
    )
  }
}
export default App
  1. 使用类静态属性声明
import React from 'react'
import PropTypes from 'prop-types'
class Test extends React.Component {
  static defaultProps = {
    list: [4, 5, 6],
  }
  render() {
    return <div>{this.props.list}</div>
  }
}
class App extends React.Component {
  render() {
    return (
      <>
        <Test />
        <Test list={[1,2,3]}>
      </>
    )
  }
}
export default App

你可能感兴趣的:(react.js,javascript,前端)