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

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

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