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 组件如下所示：

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

我是 TypeScript 的新手，但我想我需要以某种方式在组件上定义 show 道具？

Answer 1

给 show 属性赋予类型的一种方法可能是这样的 -

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

刚刚将 () 添加到 "props: {show: boolean}"

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

TypeScript error passing prop to styled-components

typescript

reactjs

styled-components