Speichern von React-Class-Funktionen in separaten Dateien

Question

Gibt es eine Möglichkeit, die Funktionen einer Reaktionsklasse in einer separaten Datei zu speichern und dann diese Funktionen zur Verwendung zu importieren? Der Grund dafür wäre, die Größe meiner Komponente zu reduzieren und Funktionen nach Kategorien zu gruppieren.

Zum Beispiel:

import functionIWantToImport from '../functions/functionIWantToImport'; 
import anotherFunction from '../functions/anotherFunction'; 

Class Test extends React.Component { 
    constructor(props){ 
     super(props); 

     this.state = {}; 
    } 

    //and then include the functions like below: 
    functionIWantToImport; 
    anotherFunction; 
} 

Ich weiß, dass ich diese Funktionen mit Helfern tun kann, den Teil der Komponentenklasse Arent. Aber ich möchte es mit meinen Komponentenfunktionen machen, um Platz zu sparen, und meinen Code aufräumen.

Answer 1

Verwenden Sie Standard-JS-Funktionen (nicht Funktionen Pfeil), und binden die Funktion auf die Instanz im Konstruktor:

function externalMethod() { // simulates imported function 
 
    return this.state.example; 
 
} 
 

 
class Test extends React.Component { 
 
    constructor(props){ 
 
     super(props); 
 

 
     this.state = { example: 'example' }; 
 
     
 
     this.externalMethod = externalMethod.bind(this); 
 
    } 
 

 
    render() {  
 
    return (
 
     <div>{ this.externalMethod() }</div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Test />, 
 
    test 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="test"></div>