如何限制 React 組件的大小並添加滾動？

Question

我需要根據用戶呈現動態數量的按鈕。 在此對話框中，他們需要選擇其中一個選項並提交。 我的目標是讓它看起來像這樣，最多顯示 4 個按鈕，並能夠滾動瀏覽其余按鈕：

但是，如果有超過 4 個可用按鈕，這些按鈕會離開屏幕並變得無法訪問，即使用戶在對話框外向下滾動頁面：

我想重組我的代碼，以便我有一個大小有限的 react 組件，一次只能顯示 4 個，確保整個屏幕都停留在頁面上。

我已經將我的代碼存儲在這個 JSFiddle： 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};
  }

此外，如果無論如何要使對話框變大，以便提交按鈕不會像那樣浮動，那也將非常有幫助。

Answer 1

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

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

看到添加了一個新類“選擇區域”並添加寬度為“GEMSelector”高度兩倍的溢出

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

Answer 2

在 React JS 中遇到了同樣的問題。 我會添加一個容器類，例如：

<div class="row container"</div>

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

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

}