Reactのコンポーネントに共通のコードを挿入するには

Question

複数のReactコンポーネントの場合、Reactのライフサイクルに共通のコードを挿入します。
何か良い方法がありますか？

Answer 1

@jzmによって提案された高次の構成要素アプローチがbetterですが、あなたはまた、ミックスインを使用することができます。

var myMixin = { 
     componentWillMount: function(){ 
     //common code 
     }, 
     componentDidUpdate: function(){ 
     //common code 
     } 
}; 
var ComponentA = React.createClass({ 
    mixin: [myMixin] 
}); 
var ComponentB = React.createClass({ 
    mixin: [myMixin] 
}) 

Answer 2

複数のコンポーネント間で機能を共有することを意味しますか？もしそうなら、あなただけの別のファイルにそれらを保つことができ、必要に今までどこにそれらをインポートします。

// common js 

function hello() { 
    console.log('hello'); 
} 

module.exports = hello; 

// your component 
var hello = require('./common'); 

var ComponentA = React.createClass({ 
    componentDidUpdate: function(){ 
     hello(); 
    },//... 

http://www.webpackbin.com/Nk80m1x_W

---

あなたがすることができるもう一つは、ラッパー（高い順）コンポーネントを作成することです：

var WrapperComponent = React.createClass({ 
    componentDidUpdate: function() { 
    // code you want to inject. 
    }, 
    render: function() { 
    return(<div>{this.props.children}</div>); 
    } 
}); 

あなたがそのライフサイクルを持つコンポーネントを使用する必要がある時はいつでも、その後、あなたはJSXでこれを行うことができます。

<WrapperComponent> 
    <ComponentA /> 
</WrapperComponent>