PropsはTypescriptとの対立で廃止されたシンボルです

Question

問題があります：私のIDEは非推奨について不平を言っています。

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; 

私は

'プロパティrefが一部に存在しません' props.refで取得しています。この時点で、私が使用し

は、与えられたコードに続いて16とtypescriptです2.5.3

を反応させます

インタフェースIPropsを拡張すると、次のようになります。

interface IProps extends Props { 
    id: string; 
} 

この時点で私のIDE

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

ここで、私はオンラインドキュメントに相談するように警告しますが、何も見つかりません。しかし、私の初期のref-propertyエラーはなくなりました。

私の質問：StatelessComponentを使用するとこれに対処する方法は？コンポーネントの使用時に対処する方法（またはエラーがないか）そして私はどのように避けることができますか？あなたはProps<T>を拡張することにより、実際の問題を誤ってマスクされてきた私に

Answer 1

を支援するための

ありがとう！これは、クライアントが原因交差点タイプする必要がなくなりれ、createElementにrefとkeyを通過できるように

を使用した。そのインタフェースは廃止された理由を説明するタイプ定義のコメントがあります。言い換えれば

、あなたはref/key/childrenが含まれることになるが、活字体での新機能は、これが不要になりましたように、あなたのプロペラ型定義のためのProps<T>を拡張するために持っていました。最初にやっていたのと同じように単純なインターフェースで渡すことができます。

しかし、これはあなたの「プロパティ参照が存在しません」というエラーを表示します。これはyou cannot use refs on stateless functional componentsです。型定義は実際には正しいことをここで行い、動作しないコードを書くのをやめてしまいます！