反応中の高度な条件付きコンポーネントのレンダリング

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

は、このような条件付きのレンダリングを処理する最善の方法は何ですか？私はそれをもっと読みやすくしたい。最初の例は条件を複製し、2番目の例では何がレンダリングされるのかはっきりしません。

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>