16. 组件的propTypes 与 defaultProps属性 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

import React, { Component } from 'react'
import PropTypes from 'prop-types'  // 脚手架工具中自带 prop-types 包

class TodoItem extends Component {
    render() {
        const { item} = this.props
        return (
            <li onClick={this.handleItemDelete}>
                {item}
            </li>
            )
    }

    handleItemDelete = () => {
        const {index, handleItemDelete} = this.props
        handleItemDelete(index)
    }
}

// 对组件的prop属性类型做强校验
// 组件的propTypes，这个propTypes要小写
TodoItem.propTypes = {
    item: PropTypes.string, // item 的类型必须是 string 类型 。这个PropTypes要与上面引入的包名一模一样（都是大写）。否则会报错
    handleItemDelete: PropTypes.func,  // handleItemDelete 接收的属性必须是一个函数。
    index: PropTypes.number // index 类型必须是一个number
}

// 总结：PropTypes可以限制父组件给子组件传值时，值的类型是什么样的。
// 在开发时，建议把组件的propTypes写上。如果类型不对，控制台会给出警告。对开发比较友好。

export default TodoItem

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

class TodoItem extends Component {
    render() {
        // 假如在子组件中，需要父组件传递进来一个test。但是父组件在使用子组件时并未传递test。
        const { item, test} = this.props
        return (
            <li onClick={this.handleItemDelete}>
                {test}-{item}
            </li>
            )
    }

    handleItemDelete = () => {
        const {index, handleItemDelete} = this.props
        handleItemDelete(index)
    }
}

// 对test属性做类型校验
TodoItem.propTypes = {
    test: PropTypes.string.isRequired
    // 控制台就会报警告：Warning: Failed prop type: The prop `test` is marked as required in `TodoItem`, but its value is `undefined`.
}

export default TodoItem

// prop属性的默认值 
TodoItem.defaultProps = {
    test: 'hello world'   // 假设test未传递，则给test一个默认值为 hello world。如果父组件中没有向子组件中传递test值，也没关系。控制台也不会报警告了。
}