React - 렌더링 함수에서 여러 구성 요소 중 하나를 반환하는 방법?

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

이상적으로 하나의 변수를 사용하여 필요한 탭을 결정한 다음 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 구성 요소를 만들어 필요한 속성 (차이점)을 가져 와서 그에 맞게 렌더링합니다. 하지만 ... 왜?

반응은 사용자가 설정 한 상태를 나타 내기 위해 DOM에 필요한 최소한의 변경 사항을 알 수 있으므로 상태 기반 시스템으로 전체 UI를 처리 할 수 ​​있으므로 매우 좋습니다. React의 우수한 성능은 이러한 차이를 얼마나 잘 나타낼 수 있는지에 기반합니다.

render 메서드가 매번 완전히 다른 구성 요소를 반환하는 경우 React는 remove one and append the other의 차이를 구분할 수 없기 때문에 remove one and append the other이됩니다. 하지만 속성과 상태를 변경하여 변경하지 않고 상태를 지정하면 구성 요소가 제대로 작동합니다. DOM은 끔찍하고 항상 변화가 적을수록 페이지가 잘 작동합니다.

완전히 다른 세 가지 구성 요소를 반환 할 수 없다는 뜻입니까? 당연히 아닙니다, 그러나 당신이 당신의 구성 요소 전부에 그것을 할 것 인 경우에, 당신은 아주 심각한 성과 문제점이있을 것입니다. 그것은 나쁜 연습과 피할 수있는 충분한 이유와 매우 흡사합니다.

오른쪽에있는 SO 탭을 사용하면 페이지의 다른 위치에서 해당 탭으로 이동할 수 있으므로 활성 상태 인 탭만 표시됩니다.

당신이 할 경우이 : 당신이 state.active가 탭을 제거하고 새로운 하나를 추가합니다 반작용 변경할 때마다

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

.

하지만 당신은 나쁜 관행을 사용하고

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

지금 그것을 변경하는 방법을 변경할 수 있습니다 정확히 알고 반작용 stateless functional components 같은 좋은 습관를 사용하지 않는 경우 수도 do fancy functional stuff 더 나은 성능을 위해 .