Чому я отримую "несподіваний маркер" у цьому фрагменті JSX? - javascript, html, reactjs, jsx, babel

я маю

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

і я отримую дуже невимовно

"Несподіваний маркер"

вказуючи на дужку на { menuIsVisible. Будь-яка ідея, в чому проблема?

Відповіді:

Ви не можете повернути два кореневі вузли. Вам потрібно буде обернути файл <p> і вираз {} у div, або якомусь іншому елементі. Зробіть це, і це повинно працювати нормально.

Джерело: документи

Крім того, основним алгоритмом React єреконструювали прямо зараз. Нова система під назвою "Fiber" має багато вдосконалень, включаючи можливість робити те, що ви намагаєтесь зробити. На момент створення цієї публікації (жовтень 2016 р.) Fiber недоступний. Останнє оновлення, яке я чув полягає в тому, що мета полягає в тому, щоб Fiber до кінця 2016 року мав паритет функцій із існуючою системою.