So verwenden Sie eine Methode von einer Komponente zur nächsten

Question

Ich habe eine Komponente, die ziemlich groß geworden ist. Ich habe beschlossen, es in zwei Komponenten aufzuteilen, aber ich habe festgestellt, dass die Komponente, die ich abgespalten habe, eine Methode aus der ursprünglichen Komponente verwenden muss.

Was ist der beste Weg, um eine Methode innerhalb einer vorhandenen Komponente zu verwenden?

Vielen Dank im Voraus!

Answer 1

Es war einmal, hätte man mixins verwendet, um zu erreichen, was Sie suchen zu tun. Seitdem kam dieser Artikel heraus: https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html Sie sind immer noch eine Option meiner Meinung nach aber erfordern Disziplin, damit Sie das Konzept nicht überbeanspruchen.

Andere Möglichkeiten für Sie wäre:

a) Bringen Sie die gewünschte Methode eine Ebene nach oben. Damit meinst du, du könntest es in der Containerkomponente deklarieren und es entlang einer props an die 2 Kinder weitergeben.

b) Wenn die Methode generisch genug ist, deklarieren Sie sie in einer Dienstprogrammklasse, die Sie in beide Komponenten importieren würden. (static Verwendung ist eine Option als auch)

c) jede andere innovative Art und Weise;) (nur zu sagen, dass diese nicht die einzigen Optionen)

Answer 2

Erweitern Sie Ihre Basisklasse mit in einem Split ab Version. Wenn Sie ES6 verwenden würde es in etwa so aussehen:

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