Reagieren: Zugriff Komponente Funktion von einer anderen Komponente

Question

Ich habe gerade ein React-Projekt von jemand anderem, aber ich bin neu zu Reagieren, so ein bisschen zu kämpfen!

Ich habe eine Datei ReactReport.js, die wie dieser (vereinfacht) aussieht:

var ReportRoute = React.createClass({ 
    onToggleEditor: function() { 
    this.setState({ 
     reportIsOpen: false 
    }); 
    }, 
    getReportClassNames: function() { 
    return classNames({ 
     'blinds--report-closed' : !this.state.reportIsOpen 
    }); 
    }, 
    render: function() { 
    return (
     <div className={this.getReportClassNames()}> 
     <!-- content --> 
     </div> 
    ); 
    } 
}); 

module.exports = ReportRoute; 

Ich habe eine separate Datei index.js, die ein Click-Ereignis enthält. In meiner onChange Funktion möchte ich die onToggleEditor Funktion aus der ReportRoute Klasse auslösen.

var Categories = React.createClass({ 
    onChange: function(category) { 
    // trigger ReportRoute.onToggleEditor(); 
    }, 
    renderCategory: function(category) { 
    return (
     <Category 
     category={category} 
     chosenType={this.props.chosenType} 
     key={category.type} 
     onChange={this.onChange} /> 
    ); 
    }, 
    render: function() { 
    return (
     <div> 
     {this.state.categories.map(this.renderCategory)} 
     </div> 
    ); 
    } 
}); 

module.exports = Categories; 

Wie auslösen ich die onToggleEditor Funktion von ReportRoute aus der onChange Funktion von Categories?

Answer 1

Sie müssen die Flussarchitektur für React verwenden, um die Interkomponenten-Kommunikation herzustellen. Es gibt viele Implementierungen von Flussmittel. 1.reflux 2. redux

Grundsätzlich in Kategorien onChange, werden Sie eine Aktion auslösen.

onChange: function() { 
    ReportActions.toggleEditor() 
} 

Und Ihre ReportRoute wird an ein Geschäft gebunden. Bitte überprüfen Sie dieses Beispiel https://blog.ochronus.com/react-js-reflux-example-2d46a4d8faf0#.wcarr7oqt

Answer 2

Sie müssen Refs verwenden. Die kurze Antwort besteht darin, eine myRefs-Eigenschaft für Ihre Categories-Klasse zu haben und dann das folgende Category-Tag hinzuzufügen.

ref={ref => this.myRefs.push(ref)} 

Sie können dann den ersten Handler mit aufrufen.

this.myRefs[0].onToggleEditor() 

Viel mehr Details zu diesem Link.

https://facebook.github.io/react/docs/more-about-refs.html