为什么该React组件配置的defaultProps在不传参场景下没有生效？

问题根因 #

• 你的函数组件入参解构存在语法逻辑错误：React函数组件的第一个入参本身就是完整的props集合，你写的({ props })是从入参里提取名为props的子属性，而非将整个入参命名为props。
• 如果你调用组件时是常规写法 <ImageComponent size="xxx" src="xxx" />，所有属性都是挂载在顶层props上，组件根本接收不到这些传入值，只会尝试读取不存在的props子属性。
• 额外说明：对象类型的defaultProps是浅合并逻辑，如果你外部传入了props对象但只传了部分字段，默认配置里的其他字段也不会自动补全，会直接使用你传入的不完整对象。

修复方案 #

方案1：保留defaultProps写法，修正解构逻辑 #

import React from 'react';
import PropTypes from 'prop-types';
import defaultImage from '../../../assets/DefaultImageOnError.svg'

// 直接把整个入参命名为props，不需要嵌套解构
export const ImageComponent = (props) => {
    return (
        <img width={ props.size } src={ props.src } alt={ props.alt }/>
    );
};

// 顶层属性分别做类型校验
ImageComponent.propTypes = {
    size: PropTypes.string,
    src: PropTypes.string,
    alt: PropTypes.string
};

// 每个顶层属性单独设默认值
ImageComponent.defaultProps = {
    size: '150px',
    src: defaultImage,
    alt: 'error'
}

方案2：更推荐的函数参数默认值写法（React 18+官方推荐，替代defaultProps） #

import React from 'react';
import PropTypes from 'prop-types';
import defaultImage from '../../../assets/DefaultImageOnError.svg'

// 解构时直接设置默认值，代码更简洁直观
export const ImageComponent = ({ 
  size = '150px', 
  src = defaultImage, 
  alt = 'error' 
}) => {
    return (
        <img width={ size } src={ src } alt={ alt }/>
    );
};

ImageComponent.propTypes = {
    size: PropTypes.string,
    src: PropTypes.string,
    alt: PropTypes.string
};

修复后直接按常规方式调用即可：

// 不传任何参数会自动加载默认值
<ImageComponent />
// 传部分参数，未传的属性自动用默认值补全
<ImageComponent src="https://example.com/test.jpg" />

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