如何在React.CreateClass中爲對象屬性提供流式提示

Question

我有一些使用React.createClass創建的組件的React代碼。

某些組件將東西作爲普通屬性存儲在對象上，例如， this.foo而不是this.props.foo或this.state.foo。

有沒有什麼辦法可以提供關於'foo'屬性的提示？我想避免現在重寫這些組件。

Answer 1

您可以爲傳遞給createClass的對象提供顯式類型。像

/* @flow */ 

import React from 'react'; 

type Spec = { foo: string }; 

const spec: Spec = { 
    foo: 'bar', 
    render() { 
    return <div>{this.foo}</div>; 
    } 
} 

const MyComponent = React.createClass(spec); 

的東西，或者如果你喜歡保持類型直列，只是用鑄造

/* @flow */ 

import React from 'react'; 

const MyComponent = React.createClass(({ 
    foo: 'bar', 
    render() { 
    return <div>{this.foo}</div>; 
    } 
}: { foo: string })); 

爲了證明這一點的工作，嘗試設置foo到42。 Flow將會投訴

/* @flow */ 

import React from 'react'; 

const MyComponent = React.createClass(({ 
    foo: 42, // <-- error: number. This type is incompatible with string 
    render() { 
    return <div>{this.foo}</div>; 
    } 
}: { foo: string }));