Почему я получаю «неожиданный токен» в этом фрагменте JSX?

Question

У меня есть

return (
     <p>Sort by: 
      <a onClick={this.toggleMenuVisibility}> 
       {selectedFilterText} <Chicon className='bubble-trigger-icon' name='downarrow' /> 
      </a> 
     </p> 
     { menuIsVisible && this.getMenuItems(productAttributes) } 
    ); 

и я получаю очень undescriptive

"Неожиданный маркер"

указывая на кронштейне на { menuIsVisible. Любая идея, в чем проблема?

Answer 1

Вы не можете вернуть два корневых узла. Вам нужно будет обернуть <p> и выражение {} в div или какой-либо другой элемент. Сделайте это, и он должен работать нормально.

Источник: the docs

Как и в стороне, алгоритм ядра Реагировать является повторной архитектура прямо сейчас. Новая система под названием «Fiber» имеет множество улучшений, включая возможность делать то, что вы пытаетесь сделать. На момент, когда этот пост был сделан (октябрь 2016 г.), волокно недоступно. Последнее обновление, которое я слышал, состоит в том, что цель заключается в том, чтобы Fiber имела функциональную четность с существующей системой к концу 2016 года.