ES6でreactjsクラスを継承するときのデフォルトプロパティを追加

Question

ReactJSおよびES6でコンポーネントクラスを継承しているときに、インスタンス関数を参照するデフォルトプロパティを追加しようとしています。具体的には、私はNPMからの日付ピッカーを持っている（日ピッカー反応する）と2つのプロパティは常に、基本クラスに送信されていることを確認する：

export default class DayPicker extends BaseDayPicker { 
constructor(props) { 
    var { ...newProps } = props; 
    newProps.onMouseDown = this.onDayPickerMouseDown; 
    newProps.onMouseUp = this.onDayPickerMouseUp; 
    super(newProps); 
} 

componentDidMount() { 
    super.componentDidMount && super.componentDidMount(); 
    window.addEventListener('mousedown', this.onPageClick, false); 
} 

componentWillUnmount() { 
    super.componentWillUnmount && super.componentWillUnmount(); 
    window.addEventListener('mousedown', this.onPageClick, false); 
} 

onPageClick = (e) => { 
    if (!this.isDayPickerMouseDown) { 
     this.props.onPageClick && this.props.onPageClick(); 
    } 
}; 

onDayPickerMouseDown = (e) => { 
    this.isDayPickerMouseDown = true; 
}; 

onDayPickerMouseUp = (e) => { 
    this.isDayPickerMouseDown = false; 
}; 

render() { 
    return super.render(); 
} 

}

上記コードの問題私は'this' is not allowed before super()を得るということです。

私はこれを解決する方法を見つけることができません。 thisを使用する必要があるデフォルトプロパティを追加できない場合は、レンダリングメソッドで解決できますか？

Answer 1

Referencing my comment on another answer

あなたは離れ継承から傾く、それはアンチパターンである必要があります。

反応がの組成のために設計された。 それはどういう意味ですか？共有する機能がある場合は、それをコンポーネントに入れ、さまざまな方法で小道具を使用させます。

TL; DRあなたはこのような状況のため高次コンポーネントを使用します。

例：あなたは、理由を知りたい場合は

BaseDayPicker = (RenderedComponent) => React.Component { 
    // just a function that takes a component, and returns a component. 
    onMouseDown() { 
    this.props.onMouseDown(doSomething()); 
    } 

    onMouseUp() { 
    this.props.onMouseUp(); 
    } 

    //... 
    // notice it renders the component that came in as a parameter. 
    render(){ 
    return (<RenderedComponent 
     onMouseUp={this.onMouseUp} 
     onMouseDown={this.onMouseDown} 
    />) // it also adds some props! super cool 
    } 
} 

class DayPicker extends React.Comnponent { 
    //... 

    onMouseDown() { 
    this.isDayPickerMouseDown = true; 
    this.props.onMouseDown(); 
    } 

    onMouseUp() { 
    this.isDayPickerMouseDown = false; 
    this.props..onMouseUp(); 
    } 

    //.... 
} 
// NOTICE, WRAPPING ONE IN ANOTHER 
export BaseDayPicker(DayPicker) 

ここreact mixins are dead理由を説明するブログ記事です。

Answer 2

可能な解決策の1つは、親クラスで2つの空の関数を指定し、子クラスでそれらをオーバーライドすることです。

class BaseDayPicker extends React.Comnponent { 
    //... 

    onMouseDown() { 
    this.props.onMouseDown(); 
    } 

    onMouseUp() { 
    this.props.onMouseUp(); 
    } 

    //.... 
} 

class DayPicker extends React.Comnponent { 
    //... 

    onMouseDown() { 
    this.isDayPickerMouseDown = true; 
    super.onMouseDown(); 
    } 

    onMouseUp() { 
    this.isDayPickerMouseDown = false; 
    super.onMouseUp(); 
    } 

    //.... 
} 

この場合、クラスメソッドと関数をprops内で渡すことができます。

BaseDayPickerを、コンポーネント自体を拡張しようとする代わりに機能を拡張する別のコンポーネントにラップする方がよい場合があります。