Question

e.g。我的组成部分：

const Link: React.SFC<LinkPropTypes> = ({ url, children, ...rest }) => {
  {
    return isUrlInSinglePageApplicationUrlWhiteList(url) ? (
      <ReactRouterLink to={url} {...rest}>
        {children}
      </ReactRouterLink>
    ) : (
      <ReactRouterLink to={url} {...rest} target="_self">
        {children}
      </ReactRouterLink>
    )
  }
}

interface LinkPropTypes  {
  url: string
  children: React.ReactNode
}

export default Link

给出编译错误

TS2339: Property 'className' does not exist on type 'IntrinsicAttributes & LinkPropTypes & { children?: ReactNode; }

从另一个TS组件调用时

<Link url={promotion.PromoKey} className="view-offer-link">
          <FormattedMessage id="viewOffer" /> <Icon type="arrow-right" />
        </Link>

我发现摆脱编译器错误的最接近方式是从React.HTMLAttributes<HTMLElement>（找到here）延伸

interface LinkPropTypes extends React.HTMLAttributes<HTMLElement> {
  url: string
  children: React.ReactNode
}

虽然我不太清楚为什么或者这是正确的

Answer 1

如果要允许在您的类上指定任何HTML元素属性，则扩展React.HTMLAttributes<HTMLElement>的解决方案是一个很好的解决方案。 React.HTMLAttributes代表所有html元素的属性，因此您将获得更多className。您还可以明确定义所需的额外属性（例如className），尽管这可能很繁琐，如果您想允许在标记上未指定任何检查的任何属性，您还可以使用：

interface LinkPropTypes {
  url: string
  children: React.ReactNode
  [name: string]: any;
}

<Link url={""} className="view-offer-link"> </Link>

TS2339：如何为具有rest参数的React组件创建props的Typescript接口？

1 个答案: