React - レンダリング機能でいくつかのコンポーネントの1つを返す方法は？

Question

私の状態で私はshowTab1,showTab2,showTab3を持っています。タブiを選択すると、他のタブはfalseに設定されます。だから私のrender機能で、私はこのような何かを返すことができるようにしたい：

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> 
); 

しかし、私は複数のリターンを持つことが許されていない、あるいは少なくともそれは悪い習慣と考えられていますことを知っています。どうすればこの問題を回避できますか？

Answer 1

1つの変数を使用して必要なタブを決定し、複数のifの代わりにswitchステートメントを使用すると理想的です。このような何かがいいだろう：

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>; 
} 

または

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

はあなたのタブが共通で何を持っているか、そして何が他のものとは異なるものなのですか？

念頭に置いて、必要なプロパティ（相違）を受け取り、それに応じてレンダリングする単一のTabコンポーネントを作成します。しかし、なぜ？

リアクションはあなたが設定した状態を表現するために必要な最小限の変更点を知ることができ、UI全体を状態ベースのシステムとして扱うことができるのですばらしいです。 Reactの優れたパフォーマンスは、それらの違いをどれだけうまく伝えることができるかに基づいています。

renderメソッドが毎回まったく別のコンポーネントを返す場合、Reactはremove one and append the otherになります。しかし、あなたがプロパティで何を変更し、何があなたのコンポーネントで変化しないのかを指定すれば、それは非常にうまくいくでしょう。 DOMはひどいですが、これまでどおり、変更が少なくなるほど、ページはより良く動作します。

3つの全く異なるコンポーネントを返すことはできませんか？もちろん、そうではありませんが、すべてのコンポーネントでこれを行うなら、非常に重大なパフォーマンス上の問題があります。それは、悪い習慣とそれを避けるための十分な理由に似ています。

非常に簡単な例として右側のSOのタブを使用し、ページ内の他の場所からそれらにナビゲートすると、アクティブなものだけが表示されます。

あなたがこれを行う場合：

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

をあなたはstate.activeを変更するたびにタブを削除し、新しいものを追加します反応します。

しかし、あなたが悪い習慣を使用して、stateless functional components

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> 
); 
} 

のような良い習慣を使用していない場合は今すぐに反応は、それがどのように変化するか、変更することができます正確に何を知っており、より良いパフォーマンスのためにすることができさえdo fancy functional stuff 。