機能コンポーネントを拡張するES6クラスのReact Componentの記述方法は？

Question

私はvanilla ES6で、extendの機能クラスをclassと書くことができます。これはhereと説明されています。

リアクションは、両方のES6クラスコンポーネントをextend ing React.Componentと機能コンポーネントを介してサポートします。私は、機能コンポーネントをextendにしようとすると、次のエラーが表示されます。

TypeError: Cannot call a class as a function 

私はES6クラスコンポーネントおよび機能部品の両方のコンポーネントと作品を拡張するいくつかのコードを記述しようとしています。コンポーネントを返す関数を記述したいが、上位コンポーネントの代わりに、いくつかの小道具を拡張して修正したいだけだ。

以下は、私が試したコードの一部ですが、動作しません。これは可能ですか？ BarExtendedはBarをレンダリングしないと思いますが、テストしていました。これが問題の一部でない限り。

function Bar() { 
    return (
    <h1>Bar</h1> 
); 
} 

class BarExtended extends Bar { 
    render() { 
    return (
     <h1>BarExtended</h1> 
    ); 
    } 
} 

ReactDOM.render(
    <div> 
    <BarExtended /> 
    </div>, 
    document.getElementById("foo") 
); 

Answer 1

警告これは私が知っている限り、反応の観点からは実際には不可能ですが、React.Componentから継承して反応コンポーネントにする必要があるため、barは単なる関数です。

class Bar extends React.Component { 

} 

反応を伴うクラスを使用する必要はありません。通常の機能を使用できます。しかし、私はあなたが探しているものは高次コンポーネントですと思っています。これは、あなたがそれに渡すコンポーネントに特別な機能を与えることができます。

function Bar(WrappedComponent){ 
return class BarExtended extends React.Component { 
    addThisFunction(){ 
    console.log('I extended the wrapped component with functionality') 
    } 
    render (
    return (
    <WrappedComponent addThisFunction={this.addThisFunction}/> 
    ) 
) 
} 
} 

これは、通常のクラスから本当に必要な場合に実行できます。 これはクラスのドキュメントの通りです。

function Animal (name) { 
    this.name = name; 
} 

Animal.prototype.speak = function() { 
    console.log(this.name + ' makes a noise.'); 
} 

class Dog extends Animal { 
    speak() { 
    console.log(this.name + ' barks.'); 
    } 
} 

var d = new Dog('Mitzie'); 
d.speak(); 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Answer 2

ええと。全く意味がないと思います。

機能コンポーネントは単なる関数です。わかりますが、レンダリング機能です。
機能コンポーネントを拡張すると、レンダリング関数をオーバーライドすることになります。つまり、レンダリング関数であるため、関数コンポーネント全体をオーバーライドすることを意味します。何もないを拡張します。