我有動態(tài)數(shù)量的按鈕，我需要根據(jù)用戶呈現(xiàn)。在此對話框中，他們需要選擇一個選項并提交。我的目標是讓它看起來像這樣，最多顯示4個按鈕，并能夠滾動其余的按鈕:

但是，如果有4個以上的可用按鈕，則這些按鈕會消失在屏幕之外，并且無法訪問，即使用戶在對話框之外向下滾動頁面也是如此:

我想重新構建我的代碼，這樣我的react組件的大小就被限制為一次只顯示4個，確保整個屏幕都在頁面上。

我把我的代碼保存在這個js fiddle:https://jsfiddle.net/connorcmu/f01xhsat/1/

renderDialog和renderButtons是這里的相關部分:

renderButtons: function() {
var accountList = this.props.accounts;


var buttonList = accountList.map(function(account) {
  return (<div className='col-sm-6'>
    <GEMSelector classname='leftButtonContainer' header={account.organization_name} stat={account.tier} contacts={account.subscriber_count+' / '+account.max_subscribers+' Contacts'} credits={account.mailing_credits + ' Credits'}></GEMSelector>
  </div>);
});
var accountsGrid =
  (<div className="container-fluid">
    <div className="row">
      <div className='col-sm-6'>
        <GEMSelector classname='leftButtonContainer' header='FRANKS CASINO' stat='Create new account' contacts='' credits='' specialpadding={true}></GEMSelector>
      </div>
      {buttonList}
    </div>
  </div>);

return {accountsGrid};
  }

此外，如果有辦法讓對話框變大，這樣提交按鈕就不會像那樣浮動，那也會很有幫助。

從代碼來看，似乎需要為accountsGrid中的className="row "添加一個新類。

var accountsGrid =
    (<div className="container-fluid">
    <div className="row selection-area">

看到一個新的類被添加到“選擇區(qū)域”，并添加寬度為“GEMSelector”高度兩倍的溢出

.selection-area{
     overflow: scroll;
     height: 300px;
}

React JS也有同樣的問題。我會添加一個容器類，比如:

<div className="row container">
    content
</div>

然后向該容器類添加樣式:

.container {
   overflow-y: scroll;
   height: 100vh;
}