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

Question

我很难解决这个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 Component看起来像这样：

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

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

Answer 1

为const Component = styled.div` opacity: ${(props: {show: boolean}) => props.show ? 1 : 0} ` 道具提供类型的一种方法可能就是这样 -

{{1}}

刚刚添加（）到＆＃34;道具：{show：boolean}＆＃34;