反応が高次のステートレスコンポーネントの小道具で問題になる

Question

反応ルータチュートリアルのようにNavLinkを作成しようとしています。しかし、私は次のように活字体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を拡張してはならない小道具。だからこの行は次のように変更する必要があります。

interface LinkProps extends React.HTMLAttributes<Link> { 

私がこのコードを変更したことをテストしたところ、私にエラーが修正されました。

Answer 2

私もこの問題に遭遇しました。しかし、第三者のコンポーネントから型を変更する代わりに、変数をTypescriptで無効にし、別の変数にpropsを代入して任意の型にキャストして、それを変更する方が良いと感じます。

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