javascript - 如何限制我的 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};
  }

另外，如果有什么方法可以使对话框变大，这样提交按钮就不会像那样 float ，那也会非常有帮助。

Answer 1

从代码看来，您需要为 accountsGrid 中的 className="row"添加一个新类。

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

看到添加了一个新类 'selection-area' 并添加宽度为 'GEMSelector' 高度两倍的溢出

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