Более чистое решение для условных выражений и циклов в JSX с использованием Babel 6

Более чистое решение для условных выражений и циклов в JSX с использованием Babel 6

JSX быстро становится немного беспорядочным при вложении условных выражений или выполнении циклов. Одно из решений - разбить его на несколько функций или компонентов, но иногда это просто усложняет отслеживание;

<div>
  {condition1 ?
    [
      (condition2 ?
        [
          <span></span>,
          'My name is ' + name + '!',
          <span></span>
        ]
      : null),
      'Hello ' + name + '!'
    ]
  : <span>Something else</span>}
  {myArray.map((item) => (
    <div>
      {item.awd}
    </div>
  )}
</div>

Возможно, вы захотите проверить небольшой проект под названием jsx-control-statement. Это плагин Babel, который представляет несколько виртуальных компонентов, которые вы можете использовать в своем JSX.

<div>
  <Choose>
    <When condition={condition1}>
      <If condition={condition2}>
        My name is {name}!
      </If>
      Hello {name}!
    </When>
    <Otherwise>
      <span>Something else</span>
    </Otherwise>
  </Choose>
  <For each="item" of={myArray} index="i">
    <div key={i}>
      {item.awd}
    </div>
  </For>
</div>

Вам не нужно импортировать какие-либо компоненты, они анализируются плагином Babel и заменяются настоящими условными операторами и циклами за кулисами.

Есть даже плагин eslint, который гарантирует, что вы не получите предупреждений об отсутствии импорта, отключенных переменных и тому подобном.

Перейдите по ссылке ниже, чтобы получить инструкции по установке и дополнительную информацию.