Reactコンポーネントを継承する正しい方法

Question

私の質問はちょっと偏っていると私は理解していますが、私はJavascriptとprototypesで非常に新しく、読んだことがあります。実用上の問題。したがって、例が非常に役立つでしょう。 だから私は基本的にそのようになっていること、Reactコンポーネントを持っている：

var Component1 = React.createClass({ 

getInitialState: function() { 
     return ({ 
      searchable: true, 
     }) 
    }, 

function1: function() { 
     return ({ 
      somevalue 
     }) 
    }, 

render: function() { 

     var redText = { 
      color: 'red' 
     }; 

     var redBorder = { 
      color: 'red', 
      border: '1px solid red' 

     }; 

     return (
       <form> 
        <div> 
         <a onClick={this.props.handleAddClick}>Something</a> 
        </div> 

        <div> 
         <label>Some label</label> 
         <input type="text"/> 
        </div> 
       </form>) 
}); 

私も絶対に基本的には同じであるが、そのrender機能のreturn内側に一つの追加<input/>を持ってComponent2を持っています。

私は同じ機能を共有するComponent3も持っていますが、異なるrender()機能を持っています。

ここで継承を適用​​し、コピー貼り付けを3回回避するにはどうすればよいですか？実用的なイラストが欠けているので、私はそれを感謝します。 Edit1____________________________________________________

は、だから私は、最初の答えは1としてプロトタイプ継承を実装しようとしたが、これらの機能は表示されませんリアクトようだ：getInitialState()がnullの場合、初期状態では、レンダリング後のnullです。このアプローチで何が問題になっていますか？

私はまた、教科書に応じて行くことにしようとしたとしました：

function MyPrototype() {}; 
MyPrototype.prototype.getInitialState = function() { 
    return ({ 
     someProperty: true; 
    }) 
}; 

function Component1() {}; 
Component1.prototype = Object.create(MyPrototype.prototype); 
Component1.prototype.render = function() { 
    console.log(this); 
    return (<div></div>)}; 

var MyComponent1 = React.createClass(new Component1()); 

しかし、私は私のブラウザを開くと、私はエラーを取得する：Uncaught Invariant Violation: createClass(...): Class specification must implement amethod.

をレンダリング私は間違ってこの方法を何をしているのですか？

Edit2_______________________________________________

は実は、私はミックスインにどちらのプロトタイプをサポートしていない反応することを参照してください。代わりに合成を使用する必要があります。 Dan Abramov's article Mixins Are Dead. Long Live Composition

Answer 1

では、コンポーネントの継承はで、反応させ、深刻なを落胆：それは、この記事で説明しています。
Reactは、同じリレーションシップを合成で表現する方がはるかに適しています。ここで

は、組成物の使用例である：

class Button extends Component { 
    render() { 
    return (
     <div className='Button' style={{ color: this.props.color }}> 
     {this.props.children} 
     </div> 
    ) 
    } 
} 

class DeleteButton extends Component { 
    render() { 
    return (
     <Button color='red'>Delete</Button> 
    ) 
    } 
} 

注DeleteButtonはそれからを継承せずにButtonのルックアンドフィールを使用する方法。代わりに、Buttonはpropsで構成可能な部分を定義し、DeleteButtonはそれらの小道具を提供します。実際のDOMでは<Button />と<DeleteButton />の両方が1つのDOMノードにレンダリングされます。再帰的な解決はrender()時に起こります。これがReactのコアアイデアです。実際に

あなたはライフサイクルフックまたはローカルの状態を必要としない場合は、あなたも機能としてコンポーネントを定義することがあります。

function Button({ color, children }) { 
    return (
    <div className='Button' style={{ color }}> 
     {children} 
    </div> 
) 
} 

function DeleteButton() { 
    return (
    <Button color='red'>Delete</Button> 
) 
} 

あなたも、機能を持つクラスを混在させることができます。これは継承では不可能ですが、構成が素晴らしい作品です。あなたの具体的な使用例については

：

I also have Component2 which is basically absolutely the same, but has one additional <input/> inside the return of its render function.

あなたのComponent1this.props.childrenを受け入れ、render()メソッドの戻り値でそれらを使用し、<Component1><input /></Component>にレンダリングComponent2持つことができます。これは私が上に示したものに非常に似ています。 children小道具を使う必要はありません。どの小道具でもReact要素を渡すことができます。 <Component1 footer={<input />} />を入力し、の中にthis.props.footerを使用できます。彼らは他のコード（一部のデータを計算例えばユーティリティ）を共有する場合

I also have Component3 , which shares same functions, but has different render() function.

、共有モジュールにそのコード外部コンポーネントを移動し、両方のコンポーネントからそれをインポートします。

これらのユーザーが任意のUIを共有している場合は、別のコンポーネントに展開して両方のコンポーネントから使用します。