Question

我正在尝试将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很好地发挥，但我显然错过了一些东西

Answer 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 means that the sidebar will push it out of the way --}}
<div class="ui grid pusher">

如果您在推送课程之前有任何内容，除了侧边栏div，您将收到错误。看一下你的来源，你会看到Semantic-ui创建了第二个推送类来包装反应生成的内容。

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

1 个答案: