语义 UI - 侧边栏打破 React 中的固定菜单答案

【问题标题】：Semantic UI - Sidebar breaking Fixed Menu in React语义 UI - 侧边栏打破 React 中的固定菜单
【发布时间】：2016-06-23 00:41:17
【问题描述】：

我正在尝试向我的应用程序添加语义 UI 侧边栏，同时保持固定的底部菜单。它在documentation page 上说

当您的侧边栏可见时应与页面内容一起移动的任何固定位置内容应接收固定的类名称并作为您的侧边栏的兄弟元素存在。

他们还提供了一个例子：

<!--body-->
  <div class="ui sidebar">
    ...
  </div>
  <div class="ui top fixed menu">
    ...
  </div>
  <div class="pusher">
    Your site's actual content
  </div>
<!--/body-->

我正在尝试按照示例进行操作，因此我将底部菜单设置为侧边栏的兄弟。然而，尽管是侧边栏的兄弟，底部菜单仍然会中断，而不是保持固定位置，它会随着页面滚动。如果我从我的代码中注释掉侧边栏，那么底部菜单可以正常工作，保持固定位置。下面是我的组件：

export default class App extends React.Component {

  componentDidMount() {
    // Localize the selector instead of having jQuery search globally
    var rootNode = ReactDOM.findDOMNode(this);
    // Initialize the sidebar
    $(rootNode).find('.ui.sidebar').sidebar({
      context: $(rootNode)
    });
  }

  openSidebar() {
    var rootNode = ReactDOM.findDOMNode(this);
    $(rootNode).find('.ui.sidebar').sidebar('toggle');
  }

  render() {

    return (
      <div>
        <div className="ui left vertical thin menu sidebar"></div>
        <div className="pusher">
          {this.props.children}
        </div>
        <div className="ui bottom fixed icon menu"></div>
      </div>
    );
  }
}

有一个similar question，但没有一个答案对我的问题有帮助。希望你能帮忙！

【问题讨论】：

标签： reactjs semantic-ui

【解决方案1】：

找到了答案。我没有将组件设为兄弟，而是将底部固定菜单添加到视图层次结构中的上一级，并相应地更改了根节点。我不确定为什么它没有按照文档中描述的方式工作，如果有人能澄清一下，我将不胜感激。

export default class App extends React.Component {

  componentDidMount() {
    // Localize the selector instead of having jQuery search globally
    var rootNode = ReactDOM.findDOMNode(this.refs.myref);
    // Initialize the sidebar
    $(rootNode).find('.ui.sidebar').sidebar({
      context: $(rootNode)
    });
  }

  openSidebar() {
    var rootNode = ReactDOM.findDOMNode(this.refs.myrefx);
    $(rootNode).find('.ui.sidebar').sidebar('toggle');
  }

  render() {

    return (
      <div>
        <div className="ui bottom fixed icon menu"></div>
        <div ref="myref">
          <div className="ui left vertical thin menu sidebar"></div>
          <div style={{paddingBottom: "90px"}} className="pusher">
            {this.props.children}
          </div>
        </div>
      </div>
    );
  }
}

【讨论】：