React: Olay iç içe bileşenleri geçirilerek

Question

en böyle bileşenleri iç içe geçmiş diyelim:

//on root component 
this.action = function(id){} 

ben gerek var mı:

<root /> 
    <comp1 /> 
    <comp2 /> 
     <target id={this.props.id}> 
     <div>click me</div> 

Ben kökü üzerinde bir işlevi çalıştırmak hedefe tıklayarak yapmak istiyorum React öğretici örneğinde olduğu gibi, zincirdeki her bileşene el ile bir özellik ayarlayabilir misiniz? Jsfiddle

<root /> 
    <comp1 clickHandler={this.action}/> 
    <comp2 clickHandler={this.clickHandler}/> 
     <target id={this.props.id} clickHandler={this.clickHandler} /> 
     <div onClick={this.props.clickHandler.bind(this, this.props.id)}>click me</div> 

Veya Normal DOM gibi olaylar kadar kabarcık bazı yol var?

Answer 1

Sen çocuk bileşenleri geçer sahne geçmek için steno kullanabilirsiniz

<Component {...this.props} more="values" /> 

sizin durumunuzda Yani

Transferring props

: Bu sanal DOM hem de bulunuyor genelinde

<root /> 
    <comp1 clickHandler={this.action}/> 
    <comp2 {...this.props} /> 
     <target {...this.props} id={this.props.id} /> 
     <div onClick={this.props.clickHandler.bind(this, this.props.id)}>click me</div> 

Answer 2

Tepki Sentetik Olaylar destekler yakalama ve kabarcıklanma aşamaları (burada açıklandığı gibi: https://facebook.github.io/react/docs/events.html). o tüm tıklama için ateş olacağından,

<root> 
    <div onClick={this.handleAllClickEvents}> 
    <comp1> 
     <comp2> 
     <target> 
      <div id={this.props.id}>click me</div> 

Ancak:

Bu

Eğer köküne yakın herhangi DOM öğesindeki bir onClick işleyicisi koyabilirsiniz ve sayfadaki tüm tıklayın olayları tetiklemek gerektiği anlamına gelir olaylar, tıklama işleyicisinde (bazı oldukça çirkin kod için yapar) aralarında ayırmak gerekir.

function handleAllClickEvents(event) { 
    var target = event.relatedTarget; 
    var targetId = target.id; 
    switch(targetId) { 
    case 'myBtn1': 
     // handle myBtn1 click event 
    case 'myBtn2': 
     // handle myBtn2 click event 
    } 
} 

Olay Delegasyonu Bu tarz

kaputun ( https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#under-the-hood-autobinding-and-event-delegation) altında yapar Tepki böylece gerçekten yapmak istediğiniz buysa kendinize sormanız gereken şey aslında.

Alternatif olarak, Flux'ta (https://facebook.github.io/flux/docs/actions-and-the-dispatcher.html#content) Dispatcher modeli gibi bir şeye bakmak isteyebilirsiniz. Gitmek biraz daha karmaşık ama genel olarak daha iyi bir çözüm.