在无状态组件

时间:2018-01-10 09:09:17

标签: reactjs typescript styled-components

我遵循关于TypeScript和React无状态组件的样式组件docs,但是在创建样式化组件时,我仍然在道具中遇到类型检查错误。

这是我的组件代码:

import { StatelessComponent } from 'react'
import styled, { css, keyframes } from 'styled-components'

interface IProps {
  altStyle?: boolean
  className?: string
  name: string
  type?: string
}

const PrimaryButton: StatelessComponent<IProps> = (props) =>
  <button className={props.className} type={props.type}>
    <span>
      {props.name}
    </span>
  </button>

PrimaryButton.defaultProps = {
  altStyle: false,
  type: 'button',
}

const hoverAnimation = keyframes`
  from {
    opacity: 0;
  } to {
    opacity: 1;
  }
`

const StyledPrimaryButton = styled(PrimaryButton)`
  background: linear-gradient(135deg, #b60c41, #b30d41, #51213c);
  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  height: 45px;
  letter-spacing: 2px;
  padding: 0 28px;
  position: relative;
  text-transform: uppercase;
  > span {
    position: relative;
  }
  &:before {
    background: #51213c;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  &:hover:before {
    animation: ${hoverAnimation} 2s ease-in-out infinite alternate;
  }
  ${(props) => props.altStyle && css`
    background: transparent;
    border: solid 2px #fff;
    transition: background 1s ease;
    &:hover {
      background: #b60c41;
      border: none;
      padding: 0 30px;
    }
    &:hover:before {
      animation-delay: 1s;
    }
  `}
`

export default StyledPrimaryButton

这就是我得到的错误:

  

components / buttons / PrimaryButton.tsx(60,5):error TS2345:类型'(props:ThemedStyledProps)=&gt;的参数假| InterpolationValue [] | undefined'不能分配给'Interpolation&gt;'类型的参数。   [0] Type'(props:ThemedStyledProps)=&gt;假| InterpolationValue [] | undefined'不能赋值为'ReadonlyArray | InterpolationFunct ......“。   [0]类型'(props:ThemedStyledProps)=&gt;中缺少属性'concat'假| InterpolationValue [] |未定义”。

如果我添加props: any,所有内容都会按预期进行构建,但是我希望找到一个更好的解决方案,以免混淆我的组件props: any

关于如何进行的任何想法?

1 个答案:

答案 0 :(得分:1)

回答我自己的问题,这是我的tsconfig.json文件:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "module": "commonjs",
    "strict": true,
    "target": "es5"
  }
}

我设置了"strict": false,现在我遇到了预期的行为,省略: any时没有错误。其他一切正常。