拋磚引玉：如何在 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 位置。大功告成。

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