基本コンポーネントを作成し、それをReactで拡張するのは良い方法ですか？

Question

私はReactを学んでいます。私はES7構文を使ってコンポーネントを書いています。 私の考えは、派生したすべてのコンポーネントに持たせたいいくつかのメソッドを含む基本コンポーネントを作成することです。たとえば、すべてのコンポーネントで双方向バインディングを実装する場合は、valueLink without the mixinを実装します。ここに私の考えです：

class MyComponent extends React.Component { 

    bindTwoWay(name) { 
     return { 
      value: this.state[name], 
      requestChange: (value) => { 
       this.setState({[name]: value}) 
      } 
     } 
    }; 
} 

 

class TextBox extends MyComponent { 
    state = { 
     val: '' 
    }; 

    render() { 
     return (<div> 
      <input valueLink={this.bindTwoWay('val')}/> 
      <div>You typed: {this.state.val}</div> 
     </div>) 
    } 
} 

そして、それだけで正常に動作します。しかし、私はこの方法に関する多くの情報を見つけることができませんでした。これは単なる例であって、valueLinkに関するものではありません。アイデアは、基本コンポーネントにいくつかのメソッドを持ち、後でそのコンポーネントを拡張して、派生コンポーネントが通常のOOP方法のようなすべてのメソッドを持つようにすることです。だから私はちょうどこれが完全に罰金か私が気づいていないいくつかの欠陥があるかどうかを知りたいと思う。ありがとう。

Answer 1

これはまったく問題なく、基本的な継承です。ミックスインを置き換えるために継承を使用する場合の注意点は、複数のミックスインを与えるときと同じように、複数の基本クラスのTextBox機能を与えることはできないため、多重継承がないことです。これを回避するには、component compositionを使用します。あなたのケースでは、この例で定義したように合成は直接動作しませんが、回避策があります。

まず、構成部品

export default (ComposedComponent) => { 
    class MyComponent extends React.Component { 
    constructor(props, state) { 
     super(props, state); 
     this.state = { 
     val: '' 
     }; 
    } 
    bindTwoWay(name) { 
     return { 
     value: this.state[name], 
     requestChange: (value) => { 
      this.setState({[name]: value}) 
     } 
     }; 
    } 

    render() { 
     return (
     <ComposedComponent 
      {...this.props} 
      {...this.state} 
      bindTwoWay={this.bindTwoWay.bind(this)} 
     /> 
     } 
    } 
    } 

    return MyComponent 
} 

を定義し、あなたは私はこれをテストしていませんが、それは動作するはずですいくつかの共通の特徴

import compose from 'path-to-composer'; 

class TextBox extends React.Component { 
    render() { 
    return (
     <div> 
     <input valueLink={this.props.bindTwoWay('val')}/> 
     <div>You typed: {this.props.val}</div> 
     </div> 
    ) 
    } 
} 

export default compose(TextBox) 

を必要とするコンポーネントを定義する必要があります。