将道具传递给样式组件的 TypeScript 错误

Posted 2023-03-13

【中文标题】将道具传递给样式组件的 TypeScript 错误

【英文标题】：TypeScript error passing prop to styled-components

【发布时间】：2017-10-20 18:41:27

【问题描述】：

我很难解决这个 TypeScript 问题。

...message: 'Type ' show: boolean; children: Element; ' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ThemedOuterStyledProps<htmlProps<HTMLDiv...'.
  Property 'show' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ThemedOuterStyledProps<HTMLProps<HTMLDiv...'.'

我正在使用 React + 样式化组件 + TypeScript。如果我有这样的样式组件：

const Component = styled.div`
    opacity: $props => props.show ? 1 : 0
`

我的 React 组件看起来像这样：

const ReactComponent = (props:  appLoading: boolean ) => (
  <Component show=appLoading />
)

我对 TypeScript 很陌生，但我认为我需要在组件上定义 show prop？

【参考方案1】：

为show 属性指定类型的一种方法可能是这样 -

const Component = styled.div`
    opacity: $(props: show: boolean) => props.show ? 1 : 0
` 

刚刚在“props: show: boolean”中加了()

【讨论】：

感谢 Mukesh，它需要稍作调整。但它有效:) 我需要包装道具：show: boolean with ()

是的，我总是忘记箭头函数 :)