為什么我在這個JSX片段中得到“意外的令牌”？

Question

我有

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

並且我得到了非常不受歡迎的

“意外的標記”

指向{ menuIsVisible的括號。 知道問題是什么嗎？

Answer 1

您無法返回兩個根節點。 您需要將<p>和{}表達式包裝在div或其他元素中。 這樣做，它應該工作正常。

資料來源： 文檔

另外，React的核心算法正在重新構建。 新系統稱為“光纖”，有許多改進，包括能夠做你想做的事情。 截至本文發布時（2016年10月），光纖無法使用。 我聽到的最后一次更新是，目標是光纖在2016年底之前與現有系統保持功能相同。