Tepki? Benim durumda

Question

ben showTab1, showTab2, showTab3 var. Sekme i seçilirse, diğer sekmeler yanlış olarak ayarlanır. Yani benim render işlevinde böyle bir şey iade edebilmek istiyorum:

return (
    <div> 
     { 
     (() => { 
      if (someCondition) { 
      if (this.state.showTab1) { 
       return (
       <div> 
        <Tab1/> 
       </div> 
      ) 
      } else if (this.state.showTab2) { 
       return (
       <div> 
        <Tab2/> 
       </div> 
      ) 
      } else if (this.state.showTab3) { 
       return (
       <div> 
        <Tab3/> 
       </div> 
      ) 
      } 
      } 

      return <span />; 
     })() 
     } 

     <AnotherComponent> 
    </div> 
); 

Ama birden getirileri izin yok, ya da en azından kötü uygulama olarak kabul edilir olduğunu biliyoruz. Bunu nasıl aşabilirim?

Answer 1

İdeal olarak, hangi sekmeye ihtiyacınız olduğunu belirlemek için tek bir değişken kullanırsınız ve daha sonra birden çok if s yerine switch deyimini kullanabilirsiniz. Böyle bir şey güzel olurdu:

render() { 
    const { currentTabId } = this.props; 
    let CurrentTab; 
    switch(currentTabId) { 
     case 'tab1': 
      CurrentTab = Tab1; 
      break; 
     case 'tab2': 
      CurrentTab = Tab2; 
      break; 
     case 'tab3': 
      CurrentTab = Tab3; 
      break; 
     default: 
      CurrentTab = null; 
    }; 
    return <div>{ CurrentTab && <CurrentTab /> }</div>; 
} 

veya

render() { 
    const { currentTabId } = this.props; 
    const tabs = { 
     tab1: Tab1, 
     tab2: Tab2, 
     tab3: Tab3, 
    }; 
    const CurrentTab = tabs[ currentTabId ] || null; 
    return <div>{ CurrentTab && <CurrentTab /> }</div>; 
} 

Answer 2

Sekmelerinizi ortak noktası nedir ve ne diğerlerinden farklı biri yapar?

akılda gerekli olan özellikleri (farklılıklar) alır ve buna göre işleyen bir tek Tab bileşeni oluşturmak olduğu sahip. Ama neden?

Eğer bir devlet tabanlı bir sistem olarak tüm UI işlemek için izin ayarladığınız devleti temsil etmek için DOM için gerekli değişiklikleri en az miktarını bilmek çünkü müthiş tepki. React'ın iyi performansı, bu farklılıkları ne kadar iyi anlatabileceğine dayanır.

render yönteminiz her seferinde tamamen farklı bir bileşen döndürürse, React remove one and append the other değerini alacaktır, çünkü bu ikisi arasındaki fark hakkında bilgi veremez. Eğer özellikleri ve bileşeninde değişmez ne gibi değişiklikler ve hangi devlet ile belirtirseniz, o zaman çok iyi işini yapacağız. DOM üzerinde yaptığınız az değişiklikler, daha iyi sayfa davranacaktır, her zaman olduğu, korkunç.

mu o üç tamamen farklı bileşenleri döndüremez mi? Tabii ki değil, eğer tüm bileşenleriniz için bunu yaparsanız, çok ciddi bir performans sorununa sahip olursunuz. Bu kötü bir uygulama ve bunu önlemek için yeterince iyi bir nedene benziyor.

nedenle sadece aktif bir gösterilmektedir çok önemsiz bir örnek olarak sağ tarafta SO sekmeleri alın ve sayfanın diğer yerden onlara gidin supose.

Bunu yaparsanız bu: Eğer state.active sekmeyi kaldırmak ve yeni bir tane ekler tepki her değiştirdiğinizde

<div> 
    {() => { 
    if (this.state.active === 'jobs') 
     return <Jobs>; 
    if (this.state.active === 'doc') 
     return <Documentation>; 
    // ... you get it 
    }} 
</div> 

.

Fakat çok kötü bir uygulama kullanın ve

const Tab = ({text, href, children}) => (
    <div> 
    <a href={href}>{text}</a> 
    {children} 
    </div> 
); 

// In the parent one 
textByTab() { 
    switch(this.state.active) { 
    case 'jobs': 
     return 'Jobs'; 
    case 'doc': 
     return 'Documentation'; 
    } 
} 

hrefByTab() { // ... you get it } 

childrenByTab() { 
    if (this.state.active === 'doc') 
    return <span className="beta-thing">Beta</span>; 
} 

render() { 
    return (
    <div> 
     <Tab text={this.textByTab()} href={this.hrefByTab()}> 
     {this.childrenByTab()} 
     </Tab> 
    </div> 
); 
} 

Şimdi nasıl değiştirebileceğinizi, değiştirebilir tam olarak ne bilir tepki stateless functional components gibi iyi bir uygulama kullanın ve yoksa Hatta do fancy functional stuff da iyi performans için .