React TS共享样式的组件道具

时间:2019-11-25 13:30:17

标签: reactjs typescript react-hooks

让打字稿了解共享组件中的道具的正确方法是什么:

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 <...>'

第二个问题: 主题是任何类型,但在提供者中具有接口: enter image description here

第三期: enter image description here

1 个答案:

答案 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} />);