为什么我在这个 JSX 片段中得到“意外的令牌”？

【问题标题】：Why am I getting "unexpected token" in this snippet of JSX?为什么我在这个 JSX 片段中得到“意外的令牌”？
【发布时间】：2017-02-28 10:34:25
【问题描述】：

我有

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

我得到了非常难以描述的

“意外的令牌”

指向{ menuIsVisible 的括号。知道问题出在哪里吗？

【问题讨论】：

标签： javascript html reactjs jsx babeljs

【解决方案1】：

您不能返回两个根节点。您需要将 <p> 和 {} 表达式包装在 div 或其他一些元素中。这样做，它应该可以正常工作。

来源：the docs

顺便说一句，React 的核心算法现在正在重新架构。这个名为“Fiber”的新系统有很多改进，包括能够做你想做的事情。截至本文发表时（2016 年 10 月），Fiber 不可用。我听到的最后一次更新是，Fiber 的目标是在 2016 年底之前实现与现有系统相同的功能。

【讨论】：