Reactjs 为共享组件获取道具

如何让typescript知道错误类型

type InputProps = {
  err?: boolean
}

export const Input = forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<'input'>>(({ err, ...rest }, ref) => {
  // some use for err here
  return <StyledInput {...rest} ref={ref} />
})


const StyledInput = styled.input<InputProps>`
  box-shadow: inset 0 0 0 1px ${({ err, theme }) => (err ? theme.badColor : theme.primaryColor)};
`

类型InputProps={
错误？：布尔值
}
export const Input=forwardRef（（{err，…rest}，ref）=>{
//这里有一些错误的用法
返回
})
const StyledInput=styled.input`
框阴影：插入0 0 1px${（{err，theme}）=>（err？theme.badColor:theme.primaryColor）}；
`

错误是：

类型上不存在属性“err” "包括儿童,， HTMLInputElement>，“格式”|“样式”|“标题”|“模式”|“键”| “接受”|“替换”|“自动完成”|。。。276更多| “onTransitionEndCapture”>>”.ts（2339）

---

哦，我自己找到了答案，您只需添加&InputProps:

type InputProps = {
  err?: boolean
}

export const Input = forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<'input'> & InputProps>(({ err, ...rest }, ref) => {
  // some use for err here
  return <StyledInput {...rest} ref={ref} />
})


const StyledInput = styled.input<InputProps>`
  box-shadow: inset 0 0 0 1px ${({ err, theme }) => (err ? theme.badColor : theme.primaryColor)};
`

类型InputProps={
错误？：布尔值
}
export const Input=forwardRef（（{err，…rest}，ref）=>{
//这里有一些错误的用法
返回
})
const StyledInput=styled.input`
框阴影：插入0 0 1px${（{err，theme}）=>（err？theme.badColor:theme.primaryColor）}；
`

使用

InputProps

-类型作为第二个通用参数：

export const Input = forwardRef<HTMLInputElement, InputProps>(({ err, ...rest }, ref) => {
  return <StyledInput {...rest} ref={ref} />
});

export const Input=forwardRef（（{err，…rest}，ref）=>{
返回
});

它也能工作，React.componentproposithoutref than有什么用？：是的，我也不知道。找不到它的任何文档，我自己也从未使用过。