如何同时使用React属性展开与属性提取？

先看现有组件实现：

const TextLarge = (props) => { // props包含classes、color和children
    return <Text
               classes={'text-large-style'}
               {...props}>
               {props.children}
           </Text>
}

const Text = ({
    children,
    color,
    classes,
}) => {
    return <p
               className={clsx('text-styles', classes)}
               style={{color: color}}>
               {children}
           </p>
}

当使用 <TextLarge classes='some-special-style'>Foo</TextLarge> 时，传入的classes会覆盖内部的text-large-style——因为{...props}属性展开操作在显式赋值的classes之后，后赋值的属性会覆盖前序属性。

虽然可以通过调整顺序让合并后的类名覆盖展开的props：

const TextLarge = (props) => {
    return <Text
               {...props}
               classes={clsx('text-large-style', props.classes)}>
               {props.children}
           </Text>
}

但如果想要更精准的控制——也就是先提取classes进行合并，再把剩余不含classes的props展开传入Text，可以用对象解构+剩余参数的写法：

const TextLarge = ({ classes: propsClasses, ...restProps }) => {
    return <Text
               classes={clsx('text-large-style', propsClasses)}
               {...restProps}>
               {restProps.children}
           </Text>
}

这种写法直接从props中解构出classes并重命名为propsClasses，剩余所有属性都存入restProps，展开restProps时不会包含classes，彻底避免了属性覆盖问题，实现了精准的属性传递控制。

内容的提问来源于stack exchange，提问作者four-eyes