React.js: Kommunikation zwischen zwei Kindern des gleichen Elternteils?

Question

Ich habe eine übergeordnete Komponente: Previewer, die zwei Kinder darstellt.

class Previewer extends Component { 
    render() { 
    return (
     <AudioPlayer /> 
     <SubtitleRow /> 
    ); 
    } 
} 

Wenn der Benutzer auf SubtitleRow klickt, sollte es passieren Variablen, z.B. startTime und EndTime, bis AudioPlayer, die Audio wiedergeben sollen.

ich die official documentation gelesen habe:

Für die Kommunikation zwischen zwei Komponenten, die keine Beziehung Eltern-Kind haben, können Sie Ihr eigenes globales Ereignis System. Abonnieren Sie Ereignisse in componentDidMount(), melden Sie sich in componentWillUnmount() ab, und rufen Sie setState() auf, wenn Sie ein Ereignis erhalten. Flussmuster ist eine der Möglichkeiten, dies zu arrangieren.

Ich denke, sie haben eine Beziehung (Geschwister), also, gibt es irgendeinen anderen Weg, ihre Kommunikation zu implementieren?

Global Event oder Variable wird nicht empfohlen, nach JavaScript die guten Teile oder etwas JavaScript-Entwurfsmuster.

Answer 1

Sie können den Status verwenden, um die Variablen an die AudioPlayer-Komponente zu übergeben. Dann in Ihrer SubtitleRow Komponente können Sie die Funktion this.props.onClick nennen (Startzeit, endTime)

class Previewer extends Component { 
constructor() { 
    this.state = { 'startTime': 0, 'endTime' : 0 }; 
    this.handleClick= this.handleClick.bind(this); 
} 

handleClick(startTime, endTime) { 
    this.setState({ 
    'startTime': startTime, 
    'endTime': endTime 
    }); 
} 

    render() { 
    return (
     <AudioPlayer startTime="{this.state.startTime}" endTime="{this.state.endTime}"/> 
     <SubtitleRow onClick="{this.handleClick}" /> 
    ); 
    } 
}