Semantic UI - Sidebar bricht festes Menü in React

Question

Ich versuche, eine semantische UI Sidebar zu meiner App hinzuzufügen, während gleichzeitig ein festes unteres Menü beibehalten wird. Er sagt, auf der documentation page dass

jede feste Position Inhalte, die mit Seiteninhalt bewegen sollte, wenn der Sidebar angezeigt wird, sollte den Namen der Klasse festgelegt und existieren als Geschwisterelement Sidebar erhalten.

Sie bieten auch ein Beispiel:

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

ich das Beispiel zu folgen versuchen, so machte ich mich unten im Menü ein Geschwister von der Seitenleiste. Obwohl es ein Geschwister der Seitenleiste ist, bricht das untere Menü immer noch ab und anstatt eine feste Position zu behalten, scrollt es mit der Seite. Wenn ich die Seitenleiste aus meinem Code ausnotiere, funktioniert das untere Menü gut und behält die feste Position bei. Unten ist meine Komponente:

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

Es gibt ein similar question aber keine der Antworten hilft bei meinem Problem. Hoffe du kannst helfen!

Answer 1

Die Antwort gefunden. Anstatt die Komponenten als Geschwister zu erstellen, habe ich mein unteres festes Menü in der Ansichtshierarchie eine Ebene höher hinzugefügt und den Stammknoten entsprechend geändert. Ich bin mir nicht sicher, warum es nicht so funktionierte, wie es in den Dokumenten beschrieben wurde, also würde ich es begrüßen, wenn jemand klären könnte.

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