CODEWITHSUNDEEP
reactjstypescriptreact-routerjsx
Bjarke H. Søndergaard
Bjarke H. Søndergaard

Reputation: 1218

Typescript issues with props of higher order stateless component in React

I'm trying to create a NavLink as in the react-router tutorial. But I can't figure out why the following doesn't work with Typescript 2.1

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

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

I keep getting:

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'

Upvotes: 0

Views: 637

Answers (2)

jaeyow
jaeyow

Reputation: 579

I have come across this problem too. But instead of changing the typings from a third party component, I feel that it is better to change it from our end by disabling Typescript for that variable, by assigning props to another variable and cast to any, like so:

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

Upvotes: 1

JKillian
JKillian

Reputation: 18351

I believe this is a react-router typings issue. In the typings you're using, you may have a line of code that looks like this:

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

With the current React typings, props interfaces should no longer extend React.Props. So the line should be changed to this:

interface LinkProps extends React.HTMLAttributes<Link> {

I tested this change out given the code you posted and it fixed the error for me.

Upvotes: 1

Related Questions