React ES6クラス間のコード共有

Question

私はいくつかの機能を枯渇させようとしています。ミックスインは無駄なので、私は何を使うべきかを理解するのに苦労しています。コードをモジュールとして設定するのは有望ですが、パッケージ化する方法がわからないので、いくつかの異なるクラスを拡張するために使用できます。私は私のコンポーネントクラスに仮定してい

class functionsToShare { 
    thingToDo(){ 
    //do a thing 
    } 
} 

export default functionsToShare; 

私が何かしたいと思います：

は、私が持っていると言う

import React from 'react'; 
import functionsToShare from 'some/path' 
class SomeComponent extends React.Component{ 
    constructor(props){ 
    super(props); 
    } 

    render(){ 
    return (

    ); 
    } 
} 

export SomeComponent 

をしかし、どのように私は私のコンポーネントを拡張するために、共有クラスを使用していますか？私がクラス宣言でそれを宣言すれば、componenetはReact.Componentを拡張するためにdelcaredされ、再利用可能性を犠牲にするでしょう...私は見ていなければならない別の方法がありますか？

Answer 1

共有関数ファイルは、必要ないくつかの関数を持つファイルとして作成できます。各関数は名前付きエクスポートとしてエクスポートされます。このように：

export function thingToDo() { 
    ... 
} 

export function getUserByEmail(email) { 
    ... 
} 

たとえば、このファイルをfunctionsToShare.jsという名前で保存します。各その後

は、コンポーネントクラスに反応（またはどこか他の）あなたはその機能、あなたによって必要なものだけをインポートすることができます

import {thingToDo} from "./functionsToShare"; // import a function 
thingToDo(); // call function 

かによって、それらのすべて：

import * as somename from "./functionsToShare"; // import all functions from that file 
somename.thingToDo(); // call specific function