リアクタコンポーネント関数を公開する

Question

ベストプラクティスに基づいていくつかのリアクションコンポーネント関数を公開する正しいオプションは何ですか？上にコンポーネントを使用

export const someFunction =() => { //do something } 

class MyComponent extends Component {} 

export default MyComponent; 

：

OPTION 1

する外部様成分の関数を作成

import MyComponent, { someFunction } from './components/myAwesomeComponent'; 

class ChildComponent extends Component { 
    parentComponentFunction() { 
     someFunction(); 
    } 

    render() { 
     <div> 
      <MyComponent /> 
     </div> 
    } 
} 

OPTION 2

（内部共通関数を作成します方法のようなコンポーネントのように：

コンポーネントを使用して

class MyComponent extends Component { 
    someFunction() { 
    // 
    } 
} 

export default MyComponent; 

以上：

import MyComponent frrom './components/myAwesomeComponent'; 

class ChildComponent extends Component { 

    parentComponentFunction() { 
      this.refs.parentComponent.someFunction(); 
    } 

    render() { 
     <div> 
     <MyComponent ref="parentComponent" /> 
     </div> 
    } 

} 

オプション3

は、それが

が存在する場合、それは意味を成していたり​​、より良い例が必要なのか分かりませんか？

Answer 1

someFunctionを参照する必要がある場合は、thisをメンバー関数として定義します。それ以外の場合は別のユーティリティ機能としてそれを維持するか、クラス（オプション3）内部のそれのように静的関数宣言のいずれか：

class MyComponent extends Component { 

    // ... 

    static someFunction() { 
     // ... 
    } 
} 

// usage: MyComponent.someFunction() 

はまた、それを制御する必要がありESLintルールが、あります：class-methods-use-this