Question

我正在尝试按照react-router教程创建一个NavLink。但我无法弄清楚为什么以下不适用于Typescript 2.1

import React from 'react';
import { Link, LinkProps } from 'react-router';

const NavLink: React.SFC<LinkProps> = (props) => (
  <Link {...props} activeClassName="active" />
);

我一直在：

file: 'file:///Users/bjarkehs/Code/lytzentid-reloaded-frontend/src/components/shared/NavLink.tsx'
severity: 'Error'
message: 'Property 'ref' of JSX spread attribute is not assignable to target property.
  Type 'Ref<Link>' is not assignable to type 'string | (string & ((instance: Link) => any)) | (((instance: Component<LinkProps, ComponentState>...'.
    Type '(instance: Link) => any' is not assignable to type 'string | (string & ((instance: Link) => any)) | (((instance: Component<LinkProps, ComponentState>...'.
      Type '(instance: Link) => any' is not assignable to type '((instance: Component<LinkProps, ComponentState>) => any) & ((instance: Link) => any)'.
        Type '(instance: Link) => any' is not assignable to type '(instance: Component<LinkProps, ComponentState>) => any'.'
at: '5,9'
source: 'ts'

Answer 1

我认为这是一个反应路由器打字问题。在您使用的打字中，您可能会有一行代码如下：

interface LinkProps extends React.HTMLAttributes<Link>, React.Props<Link> {

使用当前的React类型，props接口不应再扩展React.Props。所以该行应改为：

interface LinkProps extends React.HTMLAttributes<Link> {

我根据您发布的代码测试了此更改，并为我修复了错误。

Answer 2

我也遇到过这个问题。但是我没有改变第三方组件的类型，我觉得最好通过为该变量禁用Typescript来改变它，通过将props分配给另一个变量并转换为任何变量，如下所示：

const NavLink: React.SFC<LinkProps> = (props) => (
  const linkProps: any = props;
  <Link {...linkProps} activeClassName="active" />
);

在React中使用高阶无状态组件的道具的打字稿问题

2 个答案: