让打字稿了解共享组件中的道具的正确方法是什么:
import styled from 'styled-components'
import React, { forwardRef } from 'react'
export const Input = forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<'input'>>(({ err, ...rest }, ref) => {
return <StyledInput {...rest} ref={ref} />
})
const StyledInput = styled.input`
box-shadow: inset 0 0 0 1px ${({ err, theme }) => (err ? theme.badColor : theme.primaryColor)};
`
第一期:
属性“ err”在类型上不存在 '挑, HTMLInputElement>,“表单” | “样式” | “标题” | “模式” | “钥匙” | “接受” | “ alt” | “自动完成” | ... 276更多... | “ onTransitionEndCapture”>&{...; }和ThemeProps <...>'
答案 0 :(得分:1)
您可以为样式组件道具创建类型:
type StyledInputProps = {
err?: string
}
const StyledInput = styled.input<StyledInputProps>`
// your styles...
`;
对于主题,您必须创建自己的主题类型。示例:
type ThemeType = {
colors: {
primary: string,
}
};
const theme: ThemeType = {
colors: {
primary: '#F47829',
}
};
const App = () => (
<ThemeProvider theme={theme}>
// ...
</ThemeProvider>
);
文档:https://www.styled-components.com/docs/api#typescript。
要将错误传递到“输入”组件中,您必须为该组件再创建一种类型(或者,如果所有道具都相同,则可以使用相同类型):
type InputProps = {
err?: string
};
const Input: React.FC<InputProps> = forwardRef(({ ...rest }, ref) => {
return <StyledInput {...rest} ref={ref} />
});
或使用type作为forwardRef
的第二种类型参数:
const Input = React.forwardRef<HTMLInputElement, InputProps>(({ ...rest }, ref)
=> <StyledInput {...rest} ref={ref} />);