React Bootstrap: Get Drop-Down-Menü Breite

Question

render: function() { 
      return<BS.DropdownButton title={this.props.title} style={this.state.buttonStyle}> 
       <span ref="ddMenu">{this.props.children}</span> 
      </BS.DropdownButton> 
     } 

In den obigen Code. Wie ermittle ich die Abmessungen des oben genannten Menüs? Nicht die Abmessungen der Schaltfläche, sondern das Menü, das beim Klicken auf die Schaltfläche angezeigt wird. Ich habe versucht, ref mit getDOMNode(). GetBoundingClientRect() auf dem ddMenu, aber die Dimensionen und Koordinaten sind immer 0. Ich habe versucht, mit diesem GetDOMNode-Code in der Funktion ComponentDidMount. Aber das läuft, wenn die Schaltfläche gerendert wird, nicht das Menü.

Derzeit erstreckt sich das Menü, das ich verwende, außerhalb des Fensters. Ich möchte die Abmessungen des Menüs selbst ermitteln, damit ich den Stil des Menüs anpassen kann, damit es nicht außerhalb des Fensters angezeigt wird.

Answer 1

Das Problem ist, dass die Abmessungen und Koordinaten des Menüs nicht existieren, bis die Schaltfläche gedrückt wird. Leider konnte ich keine Reaktion finden. Also habe ich eine Lösung ohne Reaktion gefunden.

Die Lösung besteht darin, ein onClick zu der Schaltfläche hinzuzufügen. Fügen Sie in der aufgerufenen Funktion window.setTimeout für 1 Millisekunde hinzu. Grund: Das Menü erscheint nicht sofort, setTimeout gibt Ihnen genug Zeit, um auf das Menü zu warten. Dann können Sie this.refs.ddMenu.getDOMNode(). ParentNode ausführen. Wenn Sie keinen parentNode hinzufügen, werden nur die Elemente angezeigt, die Sie zum Menü hinzugefügt haben, nicht das Menü selbst. Sobald Sie das Menü haben, können Sie getBoundingClientRect() ausführen, um die Menüdimensionen und -koordinaten zu erhalten.

render: function() { 
      return<bs.DropdownButton title={this.props.title} onClick={this.getMenu}> 
       <div ref="ddMenu">{this.props.children}</div> 
      </bs.DropdownButton> 
     } 

getMenu: function(){ 
    window.setTimeout(function(){ 
    var dropMen = this.refs.ddMenu.getDOMNode().parentNode; 
    }, 1); 
} 

dropMen gibt Ihnen das Menü. Mit dropmen.getBoundingClientRect() erhalten Sie die Dimensionen und Koordinaten des Menüs. Alle CSS-Stile, die zu DropMen hinzugefügt wurden, werden dann im Menü angezeigt.