super（）でサブクラス化パターンを反応させる

Question

反応ルータチュートリアルのactive links sectionでは、アクティブリンクを使用するために以下のことを提案します。

あなたのサイトのほとんどのリンクは、それらがアクティブであることを知る必要はありませんが、通常は主要なナビゲーションリンクだけが知る必要があります。これらをラップすると便利なので、activeClassNameまたはactiveStyleがどこにいても覚えておく必要はありません。

ここでは、3つの点をスプレッド演算子で使用します。それは私たちの小道具をクローンし、このユースケースでは、私たちが恩恵を受けるために必要なコンポーネントにactiveClassNameをクローンします。

次のようになりますモジュール/ NavLink.jsで新しいファイルを作成します。

// modules/NavLink.js 
import React from 'react' 
import { Link } from 'react-router' 

export default React.createClass({ 
    render() { 
    return <Link {...this.props} activeClassName="active"/> 
    } 
}) 

を私は以下のパターンの作品のようなものを作るための方法があったかどうかを知るために興味があった：

// modules/Navlink.js 
import React from 'react' 
import { Link } from 'react-router' 

export default class extends Link { 
    constructor(props) { 
     super(props); 
     props.activeClassName = 'active' 
    } 
} 

Answer 1

ES6リアクションクラスでは、上記のようにsuperを呼び出すことができます。クラスはそのように宣言された後、デフォルトの小道具を宣言することができます。

myClass.defaultProps = { 
    activeClassName: 'active' 
} 

それとも、このようなコンストラクタのパラメータにデフォルトの小道具を宣言することがあります。

export default class extends Link { 
    constructor({firstProp, secondProp, thirdProp = "default value here"}) { 
     super(props); 
    } 
}