在 React 中使用 Semantic-UI 固定菜单和侧边栏答案

【问题标题】：Using Semantic-UI's fixed menu and sidebar in React在 React 中使用 Semantic-UI 固定菜单和侧边栏
【发布时间】：2016-01-09 08:32:54
【问题描述】：

我正在尝试将 Semantic-UI 的固定菜单和侧边栏与 React 框架一起使用。我希望获得与 Semantic-UI 的文档页面（在平板电脑和移动设备显示中）相同的结果，顶部有一个固定菜单，并且在切换时覆盖了一个左侧边栏。

我在这里整理了一个例子： https://jsfiddle.net/bullwinkle/m3hr5v36/

它可以工作，但 Semantic-UI 不喜欢这种布局，并在控制台中提供以下错误：

Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusher element
Sidebar: Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag <div class="ui inverted left vertical sidebar menu" data-reactid=".0.0">…</div>

所以 Semantic-UI 会移动布局，以便 .sidebar 和 .pusher 是 <body> 的直接子代。这不完全是 React 的方式。

如下所述：

Semantic UI sidebar throws console errors with ReactJS when render app to body

您需要为侧边栏定义自定义上下文。好的，所以我已经在侧边栏初始化中完成了：

componentDidMount() {
    $('.ui.sidebar').sidebar({
        transition: 'overlay',
        context: $('#layout')
    });
},

（请参阅 jsfiddle 的第 4 版，由于代表低，我无法发布更多链接）

这修复了错误消息，但现在顶部菜单不再固定，侧边栏会随着内容滚动。我已经尽我所能让 Semantic-UI 和 React 很好地配合，但我显然错过了一些东西

【问题讨论】：

你有没有得到这个工作？
同样的问题。仍然没有解决方案

标签： reactjs semantic-ui

【解决方案1】：

我在使用 Ember 时遇到了同样的问题，它会生成以下 DIVS：

<div data-label="layer-div" style="display: none;"></div>
<div data-label="preview-div" style="pointer-events: none; display: none;"></div>

...在您的内容之前，这会给侧边栏带来问题，因为内容需要包装在 PUSHER 类中，以便侧边栏可以在打开时将其推过。

所以，React 在你的 pusher 类之外添加了一些额外的内容，这就是它所抱怨的。

{{!-- Pusher means that the sidebar will push it out of the way --}}
<div class="ui grid pusher">

如果您在 pusher 类之前有任何内容，除了侧边栏 div 之外，您将收到错误消息。看看你的源码，你会看到 Semantic-ui 创建了第二个 pusher 类来包装 react 生成的内容。

【讨论】：