React函数组件defaultProps不生效：username默认值无法显示

你这里的核心问题是**propTypes的拼写错误**——你写的是UserGreeting.proptypes（小写p），但正确的写法应该是UserGreeting.propTypes（大写P）。

React中，defaultProps的生效逻辑会和组件的类型定义关联，拼写错误的proptypes会被React忽略，导致默认值无法正常注入。

修正后的UserGreeting组件 #

import PropTypes from 'prop-types'

function UserGreeting(props) {
    if (props.isLoggedIn)  {
        return (
            <h2>
                Welcome {props.username}!
            </h2>
        )
    } else {
        return (
            <h2>
                Please Log in!
            </h2>
        )
    }
}

// 修正为大写P的propTypes
UserGreeting.propTypes = {
    isLoggedIn: PropTypes.bool,
    username: PropTypes.string,
}

UserGreeting.defaultProps = {
    isLoggedIn: false,
    username: "Guest",
}

export default UserGreeting

修正后，当你不传递username参数时，defaultProps里的"Guest"就会正常生效。

另外，如果你使用的是React 16.8+的函数组件，也可以直接在函数参数中设置默认值，写法更简洁：

function UserGreeting({ isLoggedIn = false, username = "Guest" }) {
    // 组件逻辑保持不变
}

// 仍可保留propTypes做类型校验
UserGreeting.propTypes = {
    isLoggedIn: PropTypes.bool,
    username: PropTypes.string,
}

内容的提问来源于stack exchange，提问作者joaorhauan