2016-12-09 15 views
1

かなり大きくなったコンポーネントがあります。私は2つのコンポーネントに分割することに決めましたが、私が分割したコンポーネントは元のコンポーネントからメソッドを利用する必要があることがわかりました。あるコンポーネントから次のコンポーネントへメソッドを再利用する方法

既存のコンポーネントの内部からメソッドを使用する最もよい方法は何ですか?

ありがとうございます!

答えて

1

あなたがしたいことを達成するために、以前はいつも、mixinsを使用していました。それ以来、この記事は出ました:https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html 彼らはまだ私の意見ではオプションですが、あなたがそのコンセプトを過度に使わないように規律を必要とします。あなたのための

その他のオプションは次のようになります。

a)は1つ上のレベルの所望の方法を持参してください。これでコンテナコンポーネントで宣言し、propsに沿って2人の子供に渡すことができます。

b)メソッドが一般的な場合は、両方のコンポーネントでインポートするユーティリティクラスで宣言します。 (ちょうど

+1

をありがとう:あなたはES6を使用する場合には、次のようになります!コンテナコンポーネントを作成し、関数ポインタを使用して親から子へのトリックでした! – nikotromus

0

はスプリットオフバージョンにしてお使いのベースクラスを拡張する)これらが唯一の選択肢ではないと言うこと);

C)その他の革新的な方法(staticを使用すると、オプションとしてもです)。

class Base extends React.Component { 

    renderText() { return 'Hello'} 

    render(){ 
     return <span>{this.renderText()}</span> 
    } 
} 

class SplitOff extends Base { 
    render() { 
     return <span>{`${this.renderText()} World`}</span> 
    } 
} 

JSFiddle of the above

関連する問題