高級有條件的組件渲染反應

Question

我在JSX的鏈接。我可能會在未來的鏈接創建新的組件，但現在我想用簡單的JSX。我也有一個布爾型的道具，告訴我是否應該呈現鏈接。如果不是我想要呈現的span或div純文本。

這是我要做的事現在：

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

這是我大概可以做的更好：

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

什麼是最好的做法處理條件呈現這樣嗎？我想讓它更具可讀性。第一個例子重複了這個條件，而在第二個例子中，它不明顯將呈現什麼。

Answer 1

你可以和嘗試使用三元運算符，我們覺得這是對我們非常可讀。

{ 
    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>