defaultProps废弃后，React FC能否仅为部分Props设置默认值？

在React函数组件中，你完全可以只给需要默认值的Props设置默认值，不用把所有Props都写在参数解构里，以下是两种实用方案：

方案一：参数解构时用剩余运算符接收其他Props #

直接在参数中解构需要设置默认值的Props，剩下的所有Props用...props统一接收，后续通过props.xxx访问其他属性：

interface AutocompleteInputProps {
    items: any[],
    key: string,
    searchIcon?: boolean,
    clearSearchIcon?: boolean
}

export const AutocompleteInput: React.FC<AutocompleteInputProps> = ({ 
    searchIcon = true, 
    clearSearchIcon = true,
    ...props
}) => {    
    return (
        <>
          {/* 示例使用其他Props */}
          <div>Items count: {props.items.length}</div>
          <div>Key field: {props.key}</div>
          {searchIcon && <span>🔍</span>}
          {clearSearchIcon && <span>❌</span>}
        </>
    )      
}

方案二：函数内部解构需要默认值的Props #

参数中只保留完整的props对象，在函数内部仅解构需要设置默认值的属性，其他属性直接通过props访问：

interface AutocompleteInputProps {
    items: any[],
    key: string,
    searchIcon?: boolean,
    clearSearchIcon?: boolean
}

export const AutocompleteInput: React.FC<AutocompleteInputProps> = (props) => {    
    const { searchIcon = true, clearSearchIcon = true } = props;
    
    return (
        <>
          <div>Items count: {props.items.length}</div>
          <div>Key field: {props.key}</div>
          {searchIcon && <span>🔍</span>}
          {clearSearchIcon && <span>❌</span>}
        </>
    )      
}

这两种方案都能避免在参数中列出所有Props，同时保证TypeScript的类型检查正常工作，尤其适合Props数量多或包含继承属性的组件场景。

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