반응식에서 고급 조건부 렌더링

Question

jsx에 링크가 있습니다. 나는 미래에 링크를위한 새로운 컴포넌트를 만들지 만, 지금은 간단한 jsx를 사용하고 싶다. 또한 링크를 렌더링해야하는지 여부를 알려주는 부울 소품이 있습니다. 그렇지 않다면 span 또는 div에 일반 텍스트를 렌더링하고 싶습니다.

{isPassed && <a href={'/uri'}> 
    <span>Import</span> 
</a> || <span>Import</span>} 

이 같은 조건 렌더링을 처리하는 가장 좋은 방법은 무엇입니까 :

{isPassed && <a href={'/uri'}> 
    <span>Import</span> 
</a>} 
{!isPassed && <span>Import</span>} 

이 아마 더 잘 할 수있는 방법은 다음과 같습니다

이것은 내가 지금 그것을 어떻게? 나는 그것을 더 읽기 쉽게하고 싶다. 첫 번째 예제에서는 조건을 복제하고 두 번째 예제에서는 무엇이 렌더링 될지 명확하지 않습니다.

Answer 1

3 진수 연산자를 사용해 볼 수도 있지만, 우리에게는 매우 읽기 쉽다.

{ 
    isPassed ? 
    <a href={'/uri'}><span>Import</span></a> : 
    <span>Import</span> 
} 

그러나 여러 조건의 경우, 다음뿐만 아니라 renderComponent 방법처럼 쓰기 : 당신이 소품을 사용하여 복잡한 구성 요소가 또한 경우, 더 많은 옵션과 구성 요소를 렌더링 사용

class SomeComponent extends Component { 

    renderComponent(isPassed) { 
     switch(isPassed) { 
     case 0: 
      return <span>One</span> 
     case 1: 
      return <span>Two</span> 
     default: 
      return <span>None</span> 
     } 
    } 

    render() { 
     return { 
      <div>{ this.renderComponent(this.props.isPassed) }</div> 
     } 
    } 
} 

:

를

renderComponent({ isPassed, text }) { 
    switch(isPassed) { 
    case 0: 
     return <span>One {text}</span> 
    case 1: 
     return <span>Two {text}</span> 
    default: 
     return <span>None</span> 
    } 
} 

// Say this.props has => isPassed and text as a key 
<div>{ this.renderComponent(this.props) }</div>