带 TypeScript 的样式化组件 .attrs [英] Styled Components .attrs w/ TypeScript
问题描述
我对如何在 TypeScript 中使用 .attrs()
函数有点困惑.假设我有以下内容:
BottleBar.tsx:
interface IBottleComponentProps {填充?:布尔值}const BottleComponent = styled.div.attrs(({fill}) => ({风格: {backgroundImage: `url("./media/images/${fill ? 'Bottle-Filled.png' : 'Bottle-Empty.png'")`}}))
现在,上面的代码有效,但我不确定为什么 IBottleComponentProps
在开头和结尾都需要两次 - 没有它,我得到以下内容:
Type '{ fill: boolean;}' 不可分配给类型 'IntrinsicAttributes &Pick, HTMLDivElement>, "slot" |... 253 更多... |onTransitionEndCapture">&{ ...;}, "插槽" |... 254 更多... |onTransitionEndCapture">&部分<...>, "slot" |... 254 更多... |onTransitionEndCapture">&{ ...;&{ ...;}'.
此外,在第一个代码示例中,我得到了这样的浏览器日志;
index.js:1 警告:接收到非布尔属性 `fill` 的 `true`.
老实说这很令人困惑,而且 Styled-Components 文档在这方面不是很清楚.将不胜感激朝正确方向推动.
Answer 1: Warning about fill
您需要为样式化组件选择不同的名称,可能是full
,但不是fill
.由于
如果您提供,它将看起来像下面一个,带有正确的道具.
简而言之,您现在必须提供 2 次界面.如果您没有定义接口,您可以提供 any
.
I'm a little confused on how to use the .attrs()
function with TypeScript. Say I have the following:
BottleBar.tsx:
interface IBottleComponentProps {
fill?: boolean
}
const BottleComponent = styled.div.attrs<IBottleComponentProps>(({fill}) => ({
style: {
backgroundImage: `url("./media/images/${fill ? 'Bottle-Filled.png' : 'Bottle-Empty.png'")`
}
}))<IBottleComponentProps`
width: 20px;
height: 20px;
`;
export default function BottleBar() {
return (
<Wrapper>
<BottleComponent />
<BottleComponent fill />
</Wrapper>
)
}
Now, the above code works, but I'm unsure why IBottleComponentProps
is needed twice, both at the beginning and the end - And without it, I get the following:
Type '{ fill: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
Additionally, with the first code example, I get a browser log as such;
index.js:1 Warning: Received `true` for a non-boolean attribute `fill`.
It's honestly pretty confusing, and the Styled-Components documentation isn't very clear in this regard. A push in the right direction would be greatly appreciated.
Answer 1: Warning about fill
You need to choose a different name, maybe full
, but not fill
for your styled component. As fill
is a standard attribute of some HTML elements. Also, at w3schools
Experiment:
If you declare fill
to be string
and pass it a string value, you can see a fill
attribute added to you to div
in HTML DOM, example:
<div
fill="test"
style="background-image: url("/media/images/image_file.png");" class="sc-AxiKw jDjxaQ">
</div>
fill
is a property in SVGAttributes interface:
from node_modules/@types/react/index.d.ts
:
interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
// Attributes which also defined in HTMLAttributes
className?: string;
id?: string;
...
// SVG Specific attributes
accentHeight?: number | string;
...
fill?: string;
...
}
That's the reason of this warning:
Warning: Received `true` for a non-boolean attribute `fill`.
If you want to write it to the DOM, pass a string instead: fill="true" or fill={value.toString()}.
Answer 2: Why interface is required 2 times?
Below is the excerpt from related interface:
attrs<
U,
NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {
[others: string]: any;
} = {}
>(
attrs: Attrs<StyledComponentPropsWithRef<C> & U, NewA, T>
): ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;
U
becomes : IBottleComponentProps
which you pass
C
is HTML element or react component type
And the return type is ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>
:
export interface ThemedStyledFunction<
C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
T extends object,
O extends object = {},
A extends keyof any = never
where C
, T
were already provided. You are providing O
by passing IBottleComponentProps
the 2nd time.
If you don't provide it your BottleComponent
will look like below one with {}
for the props i.e. no props:
If you provide, it will look like below one, with the right props.
In short, you have to provide the interface 2 times for now. You can provide any
if you don't have your interface defined.
这篇关于带 TypeScript 的样式化组件 .attrs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!