我想使用高阶组件将样式添加到我的组件包装器中。打字稿说有错误ComponentWithAdddedColors.
type Props = {
bg?: string;
};
function withColors<TProps>(
Component: React.ComponentType<TProps>
): React.ComponentType<TProps & Props> {
const ColoredComponent: React.ComponentType<TProps & Props> = props => {
const { bg, ...componentProps } = props;
const ComponentWithAdddedColors = styled(Component)`
${bg && `background: ${bg};`}
`;
return <ComponentWithAdddedColors {...componentProps} />; //Typecheck error
};
return ColoredComponent;
}
当我想返回传递给 HOC 的组件时{...componentProps}还有类型检查错误。
...
{
const ColoredComponent: React.ComponentType<TProps & Props> = props => {
const { bg, ...componentProps } = props;
return <Component {...componentProps} />; //Typecheck error
};
return ColoredComponent;
}
但是，当我将所有内容传递给组件时{...props}没有类型检查错误。
...
{
const ColoredComponent: React.ComponentType<TProps & Props> = props => {
return <Component {...props} />; //No error
};
return ColoredComponent;
}
这就是你想做的吗？
export function withColors<T>(Component: React.ComponentType<T>) {
return styled(Component)<Props>`
${({ bg }) => bg && `background: ${bg};`}
`
}
const Foo: React.FC<{ bar: string }> = props => <div>{props.bar}</div>
const ColoredFoo = withColors(Foo)
export const redFoo = <ColoredFoo bg="red" bar="baz" />
但是，如果您想锁定颜色而不暴露颜色道具，那么恐怕您可能暴露了 TypeScript 错误。我自己似乎无法解决它（不使用additionalProps as any）；然而，我的做法确实有点不同。
function withColors<T>(Component: React.ComponentType<T>, additionalProps: Props) {
const { bg } = additionalProps;
const ComponentWithAddedColors = styled(Component)<Props>`
${bg && `background: ${bg};`}
`
const result: React.FC<T> = props => (
<ComponentWithAddedColors {...props} {...(additionalProps as any)} />
)
return result
}
export const RedFoo = withColors(Foo, { bg: 'red' })
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
