Question

我尝试在我的应用中添加语义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，但没有一个答案有助于解决我的问题。希望你能帮忙！

Answer 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>
    );
  }
}

语义UI - 边栏打破React

1 个答案: