最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Props is a deprecated symbol in React with Typescript - Stack Overflow

programmeradmin1浏览0评论

I have a problem: My IDE is plaining about deprecation.

I use react 16 and typescript 2.5.3

Following code given:

import React, { Props, StatelessComponent } from 'react';
import PropTypes from 'prop-types';

interface IProps {
    id: string;
}

const Foo: StatelessComponent<IProps> = (props: IProps) => {
    props.ref = nodeRef;
    return (<div id={props.id}></div>);
};

Foo.propTypes = {
    id: PropTypes.string,
};

Foo.defaultProps = {
    id: 'bar',
};

export default Foo;

At this point I am getting at props.ref 'Property ref does not exist on Partial'

When I extend my interface IProps, like this:

interface IProps extends Props {
    id: string;
}

At this point my IDE suggest to add an Generic Type

interface IProps extends Props<any> {
    id: string;
}

Now I get deprecation warning to consult online docs, BUT I do not find anything. BUT my initial error with ref-property is gone.

Now my question: How to deal with this when I use a StatelessComponent? How to deal with it, when Using Component (or is there no error)? And how can I avoid any?

Thanks for helping me

I have a problem: My IDE is plaining about deprecation.

I use react 16 and typescript 2.5.3

Following code given:

import React, { Props, StatelessComponent } from 'react';
import PropTypes from 'prop-types';

interface IProps {
    id: string;
}

const Foo: StatelessComponent<IProps> = (props: IProps) => {
    props.ref = nodeRef;
    return (<div id={props.id}></div>);
};

Foo.propTypes = {
    id: PropTypes.string,
};

Foo.defaultProps = {
    id: 'bar',
};

export default Foo;

At this point I am getting at props.ref 'Property ref does not exist on Partial'

When I extend my interface IProps, like this:

interface IProps extends Props {
    id: string;
}

At this point my IDE suggest to add an Generic Type

interface IProps extends Props<any> {
    id: string;
}

Now I get deprecation warning to consult online docs, BUT I do not find anything. BUT my initial error with ref-property is gone.

Now my question: How to deal with this when I use a StatelessComponent? How to deal with it, when Using Component (or is there no error)? And how can I avoid any?

Thanks for helping me

Share Improve this question edited Dec 8, 2017 at 13:13 dazlious asked Dec 8, 2017 at 12:53 dazliousdazlious 5566 silver badges23 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

You've accidentally masked the real problem by extending Props<T>! There's a ment in the type definitions explaining why that interface is deprecated:

This was used to allow clients to pass ref and key to createElement, which is no longer necessary due to intersection types.

In other words, you used to have to extend Props<T> for your prop type definitions so that ref/key/children would be included, but new features in TypeScript have made this unnecessary. You can just pass in a plain interface as you were doing initially.

However, this still leaves you with your 'Property ref does not exist' error - this is because you cannot use refs on stateless functional ponents. The type definitions are actually doing the right thing here and stopping you from writing code that won't work!

发布评论

评论列表(0)

  1. 暂无评论