React组件Prop默认值无法渲染显示问题求助

你的问题出在函数组件默认props的使用方式上，虽然你设置了defaultProps，但在React函数组件中，更可靠且官方推荐的方式是直接给函数参数设置默认值，而非依赖defaultProps。

修复方案1：函数参数默认值（推荐） #

修改UserGreeting.jsx的组件定义，用解构赋值直接给参数加默认值：

import PropTypes from 'prop-types'

// 解构props并设置默认值
function UserGreeting({ isLoggedIn = false, username = "Unknown" }) {
    return (
        isLoggedIn ?
            <h2 className="welcome-msg">Welcome {username}</h2>
            : <h2 className="login-prompt">Please login to continue</h2>
    )
}

UserGreeting.propTypes = {
    isLoggedIn: PropTypes.bool,
    username: PropTypes.string
}

// 可移除defaultProps，参数默认值已替代其作用
// UserGreeting.defaultProps = {
//     isLoggedIn: false,
//     username: "Unknown",
// }

export default UserGreeting

修复方案2：保留defaultProps的兼容写法 #

如果坚持使用defaultProps，可以手动在组件内合并默认值，确保props读取正常：

import PropTypes from 'prop-types'

function UserGreeting(props) {
    // 手动合并默认值，避免defaultProps不生效的情况
    const { isLoggedIn = UserGreeting.defaultProps.isLoggedIn, username = UserGreeting.defaultProps.username } = props;
    return (
        isLoggedIn ?
            <h2 className="welcome-msg">Welcome {username}</h2>
            : <h2 className="login-prompt">Please login to continue</h2>
    )
}

UserGreeting.propTypes = {
    isLoggedIn: PropTypes.bool,
    username: PropTypes.string
}

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

export default UserGreeting

原因说明 #

React 16.8+推出Hooks后，官方更推荐函数组件使用参数默认值设置props默认值，这种写法更直观，也避免了defaultProps在部分编译环境或版本下的兼容性问题。你的原代码中defaultProps理论上应生效，但可能因环境差异未被正确识别，改用参数默认值可彻底解决该问题。

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