リアクトブートストラップ：ドロップダウンメニューの幅を取得

Question

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

上記のコードでは、上記のメニューの寸法はどのようにして決められますか？ボタンの寸法ではなく、ボタンをクリックしたときに表示されるメニューです。私はddMenuのgetDOMNode（）。getBoundingClientRect（）でrefを使用しようとしましたが、ディメンションと座標は常に0です。このgetDOMNodeコードをcomponentDidMount関数で使用しようとしました。しかし、これはメニューが表示されず、ボタンがレンダリングされたときに実行されます。

現在、私が使用しているメニューは、ウィンドウの外側に広がっています。メニューの大きさを調整して、メニューのスタイルを調整してウィンドウの外に出ないようにしたい。

Answer 1

問題は、ボタンが押されるまで、メニューの寸法と座標が存在しないことです。残念ながら、私はこれを行う反応の方法を見つけることができませんでした。だから私は全く反応しない解決策を思いついた。

解決方法は、ボタンにonClickを追加することです。呼び出される関数で、1ミリ秒に設定されたwindow.setTimeoutを追加します。理由：メニューがすぐに表示されない、setTimeoutはメニューが表示されるのを待つのに十分な時間を与えます。次にthis.refs.ddMenu.getDOMNode（）。parentNodeを実行できます。 parentNodeを追加しないと、メニューに追加した要素だけが取得され、メニュー自体は取得されません。メニューを作成したら、getBoundingClientRect（）を実行してメニューの寸法と座標を取得できます。

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がメニューを表示します。 dropmen.getBoundingClientRect（）は、メニューの寸法と座標を返します。 dropMenに追加されたCSSスタイルがメニューに表示されます。