拋磚引玉：如何在 React 中使用 semantic-ui 的 fixed menu 和 sidebar

semantic-ui 的 fixed menu 和 sidebar 放在 body 中運行的很好（這是 sui 的默認設計），但是在 react 應用中，組件體系都是放在比較深的地方，很難直接放在body中，這時，問題很多。

基本思路：創建一個 sidebar 組件，以此作為 sidebar 的 context，並將內容全部放到 pusher 部分中。

如此構建，會發現很多問題：navbar 和 sidebar 不再是 fixed，顯示問題，滾動問題……

究其原因，是使用了 css3 transform 屬性，這會導致 fixed 元素失效。經過一番探索，這里貼出來一個不完美但還過得去的解決方案。

首先，構建 sidebar 組件

<div ref="context" className="pushable patch">
    <div ref="sidebar" className="ui sidebar inverted vertical left menu patch">
       ...
    </div>
    <div className="pusher">
        {children}
    </div>
</div>

注意添加了 .patch 類以便后面進行修復

然后，在 componentDidMount 中初始化 sidebar

$(this.refs.sidebar).sidebar({
    context: $(this.refs.context),
    transition: 'overlay',
    mobileTransition: 'overlay'
});

注意我們指定了 context，並且使用 overlay 來用作 transition，以避免使用 transform 屬性，這是一大限制。

然后，打 css 補丁

.pushable:not(body).patch {    -webkit-transform: unset;
    transform: unset;
}

.pushable:not(body) .patch.ui.sidebar {
    position: fixed;
}

首先，消除 context 的 transform 設置，然后，固定 sidebar 位置。大功告成。

這篇文章僅僅是拋磚引玉，同樣面對了這個問題的大神能分享更加優秀的解決方案。