flowtype：継承と総称

Question

Reactコンポーネントから継承し、新しいPropsを定義します。そのような何か（Barとエラーの多くを持って、完全に間違っている必要があります）：

私は、継承と流れジェネリックを使用する必要がありますどのように

// @flow 

class Component<Props> { 
    props: Props; 

    constructor(props: Props) { 
     this.props = props; 
    } 
} 

type FooProps = { 
    x: number; 
} 

class Foo extends Component<FooProps> { 
    _render(value: string) { 
     return `hello, ${value}`; 
    } 
    render() { 
     return this._render(`${this.props.x}`); 
    } 
}; 

type BarProps = { 
    x: number; 
    y: number; 
} 

class Bar extends Foo<BarProps> { 
    render() { 
     return this._render(`${this.props.x} ${this.props.y}`); 
    } 
} 

const foo: Foo = new Foo({x: 1}); 
const bar: Bar = new Bar({x: 1, y: 2}); 

？ （それが重要であれば、Reactコンポーネントの文脈で）。

フロー0.57.2を使用し、16.0.0と反応させます。新しいを作成

Answer 1

最も単純なケースでは、コンポーネントを反応しpropsを入力すると、ESで次のようになります。

// @flow 
import React from 'react' 

type Props = { books: Array<String>, search: (string) => void } 

class SearchList extends React.Component { 
    static defaultProps: Props 
    props: Props 

    render() { /*...*/ } 
} 

SearchList.defaultProps = { books: [], search: (_) => undefined } 

EDIT：これがあなたの場合は、ステージ3であるclass fields提案を使用している言及するのを忘れてしまいましたcreate-react-appのようなブートストラップを使用しています。それ以外の場合は、次の操作を実行できます。

// @flow 
import React from 'react' 

type Props = { books: Array<String>, search: (string) => void } 

class SearchList extends React.Component<Props> {  
    render() { /*...*/ } 
}