为此，请查看react-portal。它将内容从它所在的 z-index 堆栈中取出，同时保持它的视觉位置（顶部/左侧），允许它在其父级的裁剪矩形/框之外进行渲染。这是完美的东西像内的下拉菜单List或Table

就像是：

  render() {
    const button = (
      <button className="pull-right dropdown-toggle moreOptions" data-toggle="dropdown" id={this.props.menuid} 
      onClick={this.moreOptionsClicked.bind(this, this.props.menuid, this.props.optionStyle)}>
          <img className={this.props.menuid === this.props.moreOptionId ? this.props.optionStyle : 'option'} alt="options" 
          src={require('../../../styles/img/' + (this.props.menuid === this.props.moreOptionId ? this.props.moreOptionIcon : 'icnOptions_16') + '.png')}>
          </img>
      </button>
    );

    return (
      <Portal closeOnEsc closeOnOutsideClick openByClickOn={button}>
        <ul id={this.props.menuid + "dropdown"} className={this.props.moreOptionId + "dropdown" === this.props.menuid + "dropdown" ? this.props.showDropdown : 'dropdown-menu dropdownMenu hide'} >
            <li id={this.props.menuid + "0"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "0")}><a onClick={this.previewClick.bind(this)} ><span className={(this.props.menuid + "0") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="preview" src={require('../../../styles/img/icnPreview_16.png')}></img></span><span className='labelForOption'>Preview</span></a></li>
            <li id={this.props.menuid + "1"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "1")}><a onClick={this.openWithClick.bind(this)}><span className={(this.props.menuid + "1") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Open With" src={require('../../../styles/img/icnOpenwith_16.png')}></img></span><span className='labelForOption'>Open With</span></a></li>
            <li id={this.props.menuid + "2"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "2")}><a onClick={this.viewClick.bind(this)}><span className={(this.props.menuid + "2") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="View Details" src={require('../../../styles/img/icnViewdetail_16.png')}></img></span><span className='labelForOption'>View Details</span></a></li>
            <li id={this.props.menuid + "3"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "3")}><a onClick={this.downloadClick.bind(this)}><span className={(this.props.menuid + "3") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Download" src={require('../../../styles/img/icnDownload_16.png')}></img></span><span className='labelForOption'>Download</span></a></li>
            <li id={this.props.menuid + "4"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "4")}><a onClick={this.runJobClick.bind(this)}><span className={(this.props.menuid + "4") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Run a Job" src={require('../../../styles/img/icnRunajob_16.png')}></img></span><span className='labelForOption'>Run Optistruct Job</span></a></li>

            {this.renderProfiles()}

            <li id={this.props.menuid + "6"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "6")}><a onClick={this.duplicateClick.bind(this)}><span className={(this.props.menuid + "6") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Duplicate" src={require('../../../styles/img/icnDuplicate_16.png')}></img></span><span className='labelForOption'>Duplicate</span></a></li>
            <li id={this.props.menuid + "7"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "7")}><a onClick={this.moveToClick.bind(this)}><span className={(this.props.menuid + "7") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'} ><img alt="Move To" src={require('../../../styles/img/icnMoveto_16.png')}></img></span><span className='labelForOption'>Move To…</span></a></li>
            <li id={this.props.menuid + "8"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "8")} className='shareOption'><a onClick={this.shareClick.bind(this)}><span className={(this.props.menuid + "8") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Share" src={require('../../../styles/img/icnShare_16.png')}></img></span><span className='labelForOption'>Share…</span></a></li>
            <li id={this.props.menuid + "9"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "9")}><a onClick={this.deleteClick.bind(this)}><span className={(this.props.menuid + "9") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Delete" src={require('../../../styles/img/icnDelete_16.png')}></img></span><span className='labelForOption'>Delete</span></a></li>
        </ul>
      </Portal>
    );
  }

上面部分提到的一种解决方案是调整 z-index 的 css 类。较高的 z-index 优先于其他组件（即行）。如果您调整下拉列表的 css 以获得更高的 z-index，则 ul 应该显示。

.dropdown < ul { z-index: 50; }