フローを使用して反応成分を拡張する

Question

フローを使用してReact.Componentを拡張しようとしています。 アイデアはかなり簡単です。

バーはFooを拡張しています。

FooはReact.componentを拡張しています。

基本的には、デフォルトプロパティを共有してサブクラスに追加したいだけです。そして、そのようなこと：もちろん

/* @flow */ 
import React from 'react'; 
import Foo from './Foo.js'; 

class Bar extends Foo { 

    props : { 
     prop2 : string 
    } 

    static defaultProps = { 
     prop1: "Default Bar", 
     prop2: "Hello World" 
    } 

    render() { 

    } 
} 
export default Bar; 

/* @flow */ 
import React from 'react'; 
class Foo extends React.Component { 

    props : { 
     prop1 : string 
    } 

    static defaultProps = { 
     prop1: "Default Foo" 
    } 

    render() { 
     return; 
    } 
} 

export default Foo; 

は、このコードはまったく動作しませんが、あなたはどんなアイデアやサンプルコードがありますか？私もいくつかのそのいくつかの例を聞いた

https://facebook.github.io/react/docs/composition-vs-inheritance.html

：

多くのおかげで、

オーブ実際

Answer 1

は、の反応して、彼らの公式文書に見られるようなクリエイターたちは、継承上の組成を使用することをお勧めします開発者は最初に継承を選択したときにプロジェクトの途中で道路を切り替えましたが、Reactの人々の言うとおり、考え直すことができます：

Facebookでは、何千ものコンポーネントでReactを使用していますが、 にはコンポーネント の継承階層を作成することをお勧めしません。

（...ここを見つけた）：組成物のための

https://facebook.github.io/react/docs/composition-vs-inheritance.html#so-what-about-inheritance

=========

例を追加しました：

しかし、私の下の構図パターンの例は、あなたが望むものを達成するのに役立ちます（種類：「継承のような「）：

foo.jsは（ちょうどgetDefaultProperty()を追加）

/* @flow */ 
import React from 'react'; 
class Foo extends React.Component { 

    props : { 
     prop1 : string 
    } 

    static defaultProps = { 
     prop1: "Default Foo" 
    } 

    getDefaultProperty =() => { 
     return this.prop1; 
    } 

    render() { 
     return; 
    } 
} 

export default Foo; 

バー。戻りFooの方法、フーズより詳細に

/* @flow */ 
import React from 'react'; 
import Foo from './Foo.js'; 

class Bar extends React.Component { 

    props : { 
     prop2 : string 
    } 

    static defaultProps = { 
     prop1: "Default Bar", 
     prop2: "Hello World" 
    } 

    componentDidMount() { 
     console.log(this.refs.parent.getDefaultProperty()); 
     // here you should see prop1 of Foo (the parent) is logged 
     // or you can copy prop1 value from parent: 
     if (this.refs.parent && this.refs.parent.getDefaultProperty()){ 
     this.prop1 = this.refs.parent.getDefaultProperty(); 
     }   

    } 

    render() { 
     return (
     <Foo ref="parent"> 
      <div>{this.prop2 + ", I am the Bar component, my value now is " + this.prop1}</div> 
     </Foo> 
    )   
    } 
} 
export default Bar; 

、Bar成分が依然としてReact.Componentを拡張し、それはまだアクセスすることができる：JS（このが部分的組成パターンを用い「foo」を延びています） prop1実際

refを使用することにより、単に、Barのrender方法でFooをレンダリングすることがrefその後、我々がアクセスすることができます与えますコンポーネントフーのメソッド。これは構図パターンです。