React/ES6 -> So rufen Sie eine React-Komponentenklassenmethode von einer anderen Komponente auf?

Question

Ist es möglich, Klassenmethoden von anderen (React) -Komponenten innerhalb einer Klasse/Komponente aufzurufen?

Beispiel:

// file x.js 
import React, { Component } from 'react' 

class X extends Component { 
    methodY() { 
     console.log('methodY') 
    } 
    render() { 
     return <div /> 
    } 
} 

export default X 



// file z.js 
import React, { Component } from 'react' 

class Z extends Component { 
    render() { 
     return <button onClick={X.methodY} /> 
    } 
} 
export default Z 

Answer 1

Es könnte aus technischer Sicht möglich sein - aber Sie wirklich sollte nicht.

Es ist wichtig, wenn man anfängt, ein neues Framework zu verwenden, um die Ideologie und die Muster seiner Gemeinschaft anzunehmen. Im Falle von React gibt es keine Klassen und Methoden. Stattdessen gibt es nur Komponenten und Daten (und teilweise Zustand).

Nach flux Prinzip sollten Sie versuchen, Ihre Anwendung so zu strukturieren, dass Daten in einer einzigen Richtung fließen. Von oben nach unten.

Als solche anstelle der Komponente Z eine Funktion auf die Komponente Aufruf X, können Sie haben X eine Funktion aus der übergeordneten Komponente Modifizieren des Zustands dieser Komponente und dann vorbei einen neuen Wert zu X erhalten.

const A = ({onClick}) => (
    <button onClick={onClick}>Click me</button> 
); 

const B = ({value}) => (
    <span>{value}</span> 
); 

class Parent extends React.Component { 
    constructor() { 
    this.state = { 
     foo: 'foo' 
    }; 
    } 

    render() { 
    return (
     <div> 
     <A onClick={() => this.setState({foo: 'bar'})}/> 
     <B value={this.state.foo}/> 
     </div> 
    ); 
    } 
} 

Wie Sie sehen können, ist die übergeordnete Komponente nun dafür zuständig, den Status zu handhaben und verschiedene gleichgeordnete Komponenten miteinander zu verbinden.

Wenn Sie sich weiter mit der Untersuchung von React beschäftigen, können Sie Redux verwenden, um die Logik um Daten zu extrahieren und vollständig außerhalb Ihrer Komponente anzugeben. Was Sie am Ende haben werden, sind Präsentationskomponenten und Containerkomponenten.