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

这篇文章仅仅是抛砖引玉，一样面对了这个问题的大神能分享更加优秀的解决方案。