React.js: Aynı ebeveynin iki çocuğu arasındaki iletişim?

Question

Bir üst bileşenim var: Previewer, bu iki çocuğu oluşturur. Kullanıcı SubtitleRow tıkladığında

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

, bu geçmesi gerekir değişkenler, örneğin Ses çalmalıdır startTime ve EndTime, AudioPlayer için.

Ben official documentation okudum: Bir ebeveyn-çocuk ilişkisi olmayan iletişimi için

ikisi arasında bileşenleri, kendi küresel olay sistemini kurabilirsiniz. ComponentDidMount() içindeki etkinliklere abone olun, componentWillUnmount() öğesinde üyelikten çıkın ve bir olay aldığınızda setState() öğesini çağırın. Flux düzeni bunu düzenlemenin olası yollarından biridir.

Bence bir ilişkileri var (kardeşler), bu yüzden onların iletişimini gerçekleştirmenin başka yolu var mı?

Genel olay veya değişken, JavaScript'e göre İyi Parçalara veya JavaScript tasarım kalıplarına göre önerilmemektedir.

Answer 1

Değişkenleri AudioPlayer bileşenine geçirmek için durumu kullanabilirsiniz. Ben ikinci olduğunu sanmıyorum rağmen Sonra SubtitleRow bileşeninde sen (siz ebeveyn-çocuk/çocuk-ebeveyn ilişkileri hakkında görüşmelere bağlı sayfa fonksiyonu this.props.onClick (startTime 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}" /> 
    ); 
    } 
}