在 React 中使用 Semantic-UI 固定菜单和侧边栏
Posted
技术标签:
【中文标题】在 React 中使用 Semantic-UI 固定菜单和侧边栏【英文标题】：Using Semantic-UI's fixed menu and sidebar in React 【发布时间】：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 很好地配合，但我显然错过了一些东西
【问题讨论】：
你有没有得到这个工作？ 同样的问题。仍然没有解决方案 【参考方案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 生成的内容。
【讨论】：
以上是关于在 React 中使用 Semantic-UI 固定菜单和侧边栏的主要内容，如果未能解决你的问题，请参考以下文章
使用 React 和 Semantic-Ui 更新菜单中的活动项
从Semantic-UI CSS中删除数据：application / x-font-ttf和data：application / font-woff？