React 子组件类型检查 PropTypes介绍

子组件通过this.props属性接受传值的同时也可以对其进行类型检查

示例组件<Message handleClick={this.alertMessageById} index={index} content={content}/>

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

class Message extends React.Component {
    
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }

    render() {
        return (
            <div onClick={this.handleClick}>{this.props.content}</div>
        )
    }

    handleClick() {
        this.props.alertMessageById(this.props.index);
    }
}

// 此处对传来的值做类型检查
Message.propTypes = {
    index: PropTypes.number,
    content: PropTypes.string.isRequired,
    alertMessageById: PropTypes.func
}

export default Message;

需要注意的是PropTypes只作运行时检查，会有warn level的log打印在控制台

标签：handleClick,React,PropTypes,props,组件,Message
来源： https://www.cnblogs.com/toream/p/14050852.html