JS/TS: object 解构

Question

我有一个名为props的变量。 该类型扩展自VariantTheme 、 VariantSize 、 VariantGradient和React.DOMAttributes<HTMLOrSVGElement>

然后我想再做一个变量，比如说htmlProps 。 我想从props填充htmlProps 。 除了在React.DOMAttributes<HTMLOrSVGElement>上列出的以外，我不希望它充满外国道具。 然后将过滤后的道具传播到反应组件中。

这里不工作的代码：

export interface Props
    extends
        VariantTheme,
        VariantSize,
        VariantGradient,
        React.DOMAttributes<HTMLOrSVGElement>
{
    tag?     : keyof JSX.IntrinsicElements
    classes? : string[]
}
export default function Element(props: Props) {
    const elmStyles     = styles.useStyles();

    // themes:
    const variTheme     = useVariantTheme(props);
    const variSize      = useVariantSize(props);
    const variGradient  = useVariantGradient(props);



    const Tag       = (props.tag ?? 'div');
    const htmlProps = props as React.HTMLAttributes<HTMLOrSVGElement>; // not working! Still containing strange props from VariantTheme, VariantSize, tag, classes, ...
    return (
        <Tag {...htmlProps}
            className={[
                elmStyles.main,
                
                // themes:
                variTheme.class,
                variSize.class,
                variGradient.class,

                ...(props.classes ?? []),
            ].filter((c) => !!c).join(' ')}
        >
            {(props as React.PropsWithChildren<Props>)?.children}
        </Tag>
    );
};

你有想法修复我的代码吗？

Answer 1

@spender 已经给你答案了。 Typescript 仅在编译时存在，您真正要做的是告诉编译器 props 现在是React.HTMLAttributes<HTMLOrSVGElement>类型，但您仍然对props的组成方式负责。 总之，typescript 不会改变您的 javascript 代码的工作方式，它只会帮助您在编译时发现错误。

您的用例的一种解决方案是将htmlProps作为props的属性，然后将它们传播到Tag 。

export interface Props
    extends
        VariantTheme,
        VariantSize,
        VariantGradient
{
    tag?     : keyof JSX.IntrinsicElements
    classes? : string[],
    htmlProps: React.DOMAttributes<HTMLOrSVGElement>, // dom attributes is now a property in props
}
export default function Element(props: Props) {
    const elmStyles     = styles.useStyles();

    // themes:
    const variTheme     = useVariantTheme(props);
    const variSize      = useVariantSize(props);
    const variGradient  = useVariantGradient(props);



    const Tag       = (props.tag ?? 'div');
    return (
        <Tag {...props.htmlProps} // you can now pass the desired props to tag
            className={[
                elmStyles.main,
                
                // themes:
                variTheme.class,
                variSize.class,
                variGradient.class,

                ...(props.classes ?? []),
            ].filter((c) => !!c).join(' ')}
        >
            {(props as React.PropsWithChildren<Props>)?.children}
        </Tag>
    );
};

但@spender 的建议是更好的方法。

不要忘记更新你的钩子以适应这种变化。