Freigeben von React Component-Funktionen

Question

Was ist die richtige Option, um einige reaktive Komponentenfunktionen basierend auf Best Practices verfügbar zu machen.

OPTION 1

erstellen, die Funktion außerhalb der Komponente wie:

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

class MyComponent extends Component {} 

export default MyComponent; 

die Komponente unter Verwendung der oben:

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

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

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

OPTION 2

die Funktion intern Erstellen (common Weg) der Komponente wie:

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

export default MyComponent; 

Mit der Komponente oben:

import MyComponent frrom './components/myAwesomeComponent'; 

class ChildComponent extends Component { 

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

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

} 

Option 3

Haben Sie keine Ahnung, ob es

existiert Ist es sinnvoll oder haben Sie ein besseres Beispiel benötigen?

Answer 1

Wenn someFunction auf this verweisen muss, definieren Sie es als Elementfunktion. Ansonsten entweder halten sie als separate Nutzenfunktion oder deklarieren es als statische Funktion innerhalb der Klasse (Option 3):

class MyComponent extends Component { 

    // ... 

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

// usage: MyComponent.someFunction() 

Auch gibt es eine ESLint Regel, dass sollte es kontrollieren: class-methods-use-this