React中使用 PropTypes 进行类型检查

官方文档学习链接：https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html

import React, { Component } from 'react'

import PropTypes from 'prop-types'

class TodoItem extends Component {

  constructor (props) {

    super(props)

    this.handleClick = this.handleClick.bind(this)

  }

  render() {

    const { content, test } = this.props

    return (

        <li onClick={this.handleClick}>

          { test } - { content }

          {/* { this.props.content } */}

        </li>

    )

  }

  handleClick () {

    const { deleteItem, index } = this.props

    deleteItem(index)

    // this.props.deleteItem(this.props.index)

  }

}

// PropTypes规定父组件传递值的类型

TodoItem.propTypes = {

  // isRequired 设置属性为必传

  test: PropTypes.string.isRequired,

  // oneOfType：一个对象可以是几种类型中的任意一个类型

  content: PropTypes. oneOfType([PropTypes.number, PropTypes.string]),

  // content: PropTypes.string,

  deleteItem: PropTypes.func,

  index: PropTypes.number

}

// 若父组件没有给子组件传值（test），可以通过defaultProps设置默认值

TodoItem.defaultProps = {

  test: 'hello world'

}

export default TodoItem

巴特西

React中使用 PropTypes 进行类型检查

最新文章

热门文章