Aufruf der Funktion einer Komponente von einer anderen, nicht verwandten Komponente in React

Question

Ich arbeite an einer Stoppuhr-App mit ReactJS und Electron. Ich habe eine Timer-Komponente, die die Zeit verfolgt und die Uhr & Kontrollen anzeigt.

Die Bedienelemente bestehen aus drei Tasten: Play, Pause und Stop. Diese Button-Komponenten haben keinerlei Bezug zur Timer-Komponente.

Meine Frage ist: Wenn ich eine handleStopClick() Funktion in der Timer-Komponente habe, wie kann ich es aus der StopButton-Komponente aufrufen?

Hinweis: Derzeit gibt es keine Wiedergabe/Pause-Funktion. Der Timer startet einfach, wenn er montiert ist und ein einzelner Stop-Knopf sollte ihn löschen. Ich füge den Rest hinzu, wenn ich das aussortiert habe. Hier

ist Timer.jsx:

import '../assets/css/App.css'; 
import React, { Component } from 'react'; 
import PlayButton from './PlayButton'; // No function 
import PauseButton from './PauseButton'; 
import StopButton from './StopButton'; 

class Timer extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      isRunning: false, 
      secondsElapsed: 0 
     }; 
    } 

    getHours() { 
     return ('0' + Math.floor(this.state.secondsElapsed/3600)).slice(-2); 
    } 

    getMinutes() { 
     return ('0' + Math.floor(this.state.secondsElapsed/60) % 60).slice(-2); 
    } 

    getSeconds() { 
     return ('0' + this.state.secondsElapsed % 60).slice(-2); 
    } 

    handleStopClick() { 
     clearInterval(this.incrementer); 
    } 

    componentDidMount() { 
     this.isRunning = true; 
     console.log(this.isRunning); 

     var _this = this; // reference to component instance 

     this.incrementer = setInterval(() => { 
      _this.setState({ 
       secondsElapsed: (_this.state.secondsElapsed + 1) 
      }); 
     }, 1000) 
    } 

    playOrPauseButton() { 
     if (this.isRunning) {return <PauseButton />} 
     else {return <PlayButton />} 
    } 

    render() { 
     return (
      <div> 
       {this.playOrPauseButton()} 
       <StopButton /> <hr /> 
       {this.getHours()} : {this.getMinutes()} : {this.getSeconds()} 
      </div> 
     ); 
    } 
} 

export default Timer; 

Und StopButton.jsx:

import '../assets/css/App.css'; 
import React, { Component } from 'react'; 
import Timer from './Timer'; 

class StopButton extends Component { 
    handleClick() { 
     console.log('this is: ', this); 
     Timer.handleStopClick() // here's where I'd like to call Timer's function 
    } 

    render() { 
     return (
      <button onClick={(e) => this.handleClick(e)}> 
       &#9632; 
      </button> 
     ); 
    } 
} 

export default StopButton; 

Answer 1

Sie können die handleStopClick Methode in den onClick Handler Ihrer StopButton Komponente zu übergeben:

constructor(props) { 
    ... 
    this.handleStopClick = this.handleStopClick.bind(this); 
} 

render() { 
    return (
     ... 
     <StopButton onClick={this.handleStopClick}/> 
    ); 
} 

oder, da es aussieht, als hättest du zusätzliche dinge yo u tun wollen, wenn die StopButton geklickt wird, können Sie es als eine normale Stütze passieren kann und es in der handleStopClick Methode des Kindes Komponente Referenz:

// Timer 

render() { 
    return (
     ... 
     <StopButton parentStopClick={this.handleStopClick}/> 
    ); 
} 

// StopButton 

handleStopClick() { 
    ... 
    this.props.parentStopClick(); 
}