高级有条件的组件渲染反应

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>