Props是React with Typescript中不推薦使用的符號

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'部分'不存在屬性引用'

當我擴展我的界面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中的新功能使得這不必要。 您可以像最初一樣傳入一個簡單的界面。

但是，這仍然會讓您的“屬性引用不存在”錯誤 - 這是因為您無法在無狀態功能組件上使用引用 。 類型定義實際上是在這里做正確的事情，並阻止你編寫無法工作的代碼！