javascript-道具是React with Typescript中不推荐使用的符号

我有一个问题：我的IDE抱怨过时.

我使用反应16和打字稿2.5.3

给出以下代码：

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;

在这一点上,我正在props.ref’部分上不存在属性ref’

当我扩展接口IProps时,如下所示：

interface IProps extends Props {
    id: string;
}

在这一点上,我的IDE建议添加一个通用类型

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

现在,我收到弃用警告,以咨询在线文档,但是我什么也没找到.但是我的引用属性最初的错误消失了.

现在我的问题是：使用StatelessComponent时该如何处理？使用组件时如何处理(或没有错误)？我该如何避免呢？

谢谢你帮我

解决方法:

您无意中通过扩展Props< T>掩盖了真正的问题！类型定义中有一条注释,说明了不赞成使用该接口的原因：

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

换句话说,您过去不得不将Props< T>扩展为用于您的道具类型定义,以便包括ref / key / children,但是TypeScript中的新功能使此操作变得不必要.您可以像最初一样传递一个简单的界面.

但是,这仍然使您出现“属性引用不存在”错误-这是因为you cannot use refs on stateless functional components.类型定义实际上在这里做对了,使您无法编写无效的代码！