抛砖引玉：如何在 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

标签：

原文地址：http://www.cnblogs.com/zhaoyao91/p/5595511.html