はネイティブ<{}>構文

Question

私は新しいを作成したと反応react-native initを使用してネイティブプロジェクトを反応させ、生成されたテンプレートでは、メインコンポーネントクラスは次のようになります。私は本当に<{}>部分が何を意味するか理解していない

export default class App extends Component<{}> { 
    ... 
} 

。私はこれまでこれを見たことがなく、すべての例がそれを省略しているようです。その目的が何であるか、それが必要なのか不思議です。

Answer 1

これは、Typescript of Flowのいずれかです。通常、propTypeとしてはなく、インタフェースまたはタイプとしてプロップを記述します。その後、型はGenericとしてReact.Componentに渡されます。小道具の

タイプが渡されたタイププラス{ children?: ReactNode }

だろう実際には一般的な2つの引数、国家

非常に便利と便利なもののための第二があります。

https://www.typescriptlang.org/docs/handbook/generics.html https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

Answer 2

これらは、フロー型注釈です。 https://flow.org/ ファイルの先頭に@flowというコメントがあり、プロジェクトのルートにファイルが.flowconfigであることがわかります。

ここでのフローの使用はオプションですが、バグの検出に役立ちます。

Answer 3

typescriptを使用している場合は、期待する値の種類を指定する必要があります。これにより、コンパイル時に不一致のプロパティを検出し、エラーの量を減らすことができます。

Component<{}>を入力すると、Propsのタイプは{}となり、コンポーネントが表示されます。

あなたが気付いた場合、タイプは<Props, State>の略<P, S>、次のとおりです。

これはのリアクトComponentクラスがどのように見えるかです。

---

anyような状態で内部に新しいコンポーネントを初期化署名<P>、

を有するComponentClassと呼ばれる別のインターフェイスがあります。このインタフェースは、ReactElement's typeに使用されます。

したがって、すべてのすべてで、あなたは何の小道具を受け入れず、しかし、任意のタイプの状態を持つことができるコンポーネントを定義しています。これは、通常、コンポーネントの対話が不明な場合に実行されます。

理想的にはコンポーネントは次のようになります。

interface IComponentState { 
    ... 
} 

interface IComponentProps { 
    ... 
} 

export class MyComponent<IComponentProps, IComponentState> extends React.Component { 
    ... 
} 

これは、すべての必要なプロパティを渡すために、消費者を強制し、状態の適切な値を持っているあなたを強制します。