Bul*_*kle 7 reactjs semantic-ui
我正在尝试使用Semantic-UI的固定菜单和侧边栏以及React框架.我希望获得与Semantic-UI的Docs页面(在Tablet和Mobile显示中)相同的结果,顶部有固定菜单,切换时覆盖左侧边栏.
我在这里汇总了一个例子: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>?
所以语义UI围绕移动布局,使.sidebar和.pusher是直接孩子<body>.这不完全是React的方式.
如下所述:
在将应用程序渲染到正文时,语义UI侧边栏会使用ReactJS抛出控制台错误
您需要为侧边栏定义自定义上下文.好的,所以我在边栏初始化中完成了:
componentDidMount() {
$('.ui.sidebar').sidebar({
transition: 'overlay',
context: $('#layout')
});
},
(参见jsfiddle的第4版,由于低代表我无法发布更多链接)
这修复了错误消息,但现在顶部菜单不再固定,侧边栏与内容一起滚动.我已尽力使Semantic-UI和React很好地发挥,但我显然错过了一些东西
我对 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 生成的内容。
| 归档时间： |
|
| 查看次数： |
3366 次 |
| 最近记录： |