Усовершенствованный условный компонент рендеринга в реакции

Question

У меня есть ссылка в jsx. Я могу создать новый компонент для ссылки в будущем, но сейчас я хотел использовать простой jsx. У меня также есть boolean prop, который говорит мне, должен ли я отображать ссылку или нет. Если нет, я хочу сделать простой текст в 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>