Erweiterte bedingte Komponente Rendering in reagieren

Question

Ich habe einen Link in Jsx. Ich kann neue Komponente für den Link in der Zukunft erstellen, aber jetzt wollte ich einfach jsx verwenden. Ich habe auch eine boolesche Requisite, die mir sagt, ob ich den Link rendern soll oder nicht. Wenn nicht, möchte ich Klartext in einem span oder div rendern. Diese

ist, wie ich es jetzt tun:

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

Dies ist, wie ich es wahrscheinlich besser machen kann:

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

Was ist die beste Praxis der Handhabung bedingten Rendering so? Ich möchte es lesbarer machen. Das erste Beispiel dupliziert die Bedingung und im zweiten Beispiel ist nicht ersichtlich, was gerendert wird.

Answer 1

Sie können auch versuchen, mit ternären Operator, wir fühlen es ist sehr lesbar für uns.

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

Aber im Fall von mehreren Bedingungen, dann auch eine renderComponent Methode schreiben, wie:

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

Weiteres wenn Sie komplexe Komponenten mit Requisiten haben, dann ist die Komponente mit mehr Optionen machen verwenden:

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>