Question

我遇到了问题：我的IDE抱怨弃用。

我使用react 16和typescript 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＆＃39;属性参考不存在于部分＆＃39;

当我扩展我的界面IProps时，像这样：

interface IProps extends Props {
    id: string;
}

此时我的IDE建议添加Generic Type

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

现在我得到弃用警告以咨询在线文档，但我找不到任何东西。但是我对ref-property的初始错误消失了。

现在我的问题：当我使用StatelessComponent时如何处理这个问题？使用组件时如何处理它（或者没有错误）？我怎么能避免任何？

感谢您的帮助

Answer 1

你通过扩展Props<T>意外掩盖了真正的问题！在类型定义中有一条注释，解释了为什么不推荐使用该接口：

这用于允许客户将ref和key传递给createElement，由于交叉类型，这不再是必需的。

换句话说，您过去必须为您的道具类型定义扩展Props<T>，以便包含ref / key / children，但新功能包括在内TypeScript使这变得不必要了。您可以像最初一样传入一个简单的界面。

但是，这仍然会让您的'属性引用不存在'错误 - 这是因为you cannot use refs on stateless functional components。类型定义实际上是在这里做正确的事情，并阻止你编写无效的代码！

Props是React with Typescript中不推荐使用的符号

1 个答案: