React-bootstrap： - 是否有可能在Popover組件內部具有MenuItem

Question

是否有可能在Popover組件內部具有MenuItem並仍保留樣式。現在我得到menuitem（沒有樣式），當我只使用MenuItem組件。當我包裹它時，沒有任何東西可見。

<Overlay 
    show={this.state.isOpen} 
    target={this.state.target} 
    placement="bottom" 
    container={this} 
> 
    <Popover 
    id="profilePopover" 
    title={`Hello ${givenName || ''}${surname || ''}`} 
    > 
    <strong>Holy guacamole!</strong> Check this info. 
    <Clearfix> 
     <ul className="dropdown-menu open"> 
     <MenuItem>link</MenuItem> 
     </ul> 
    </Clearfix> 
    </Popover> 
</Overlay> 

Answer 1

你的酥料餅類中返回超過1項。

<Overlay 
    show={this.state.isOpen} 
    target={this.state.target} 
    placement="bottom" 
    container={this} 
> 
    <Popover 
    id="profilePopover" 
    title={`Hello ${givenName || ''}${surname || ''}`} 
    > 
{ 
<div> 
<strong>Holy guacamole!</strong> Check this info. 
<Clearfix> 
<ul className="dropdown-menu open" style={{display:"block", position: "relative"}}> 
    <MenuItem>Test</MenuItem> 
    <MenuItem>Test2</MenuItem> 
</ul> 
</Clearfix>                  </div>                   } 
    </Popover> 
</Overlay> 

，它得到的東西與類名做「下拉菜單中打開」嘗試在它

Answer 2

謝謝你們添加一個樣式，我創建的自定義酥料餅的元素，撒了一些自定義的.css和我可以在彈出窗口中看到menuItem。雖然我還沒有糾正arrowOffset值和頂端對齊不工作...他們分開的問題。

 <Overlay 
      show={this.state.isOpen} 
      target={this.state.target} 
      container={this} 
      placement="bottom" 
      arrowOffsetTop="-6px;" 
      arrowOffsetLeft="79%;" 
     > 
      <PopoverAligned 
      links={links} 
      givenName={givenName} 
      surname={surname} 
      greetingText={greetingText} 
      /> 
     </Overlay> 


const PopoverAligned = props => (
    <Popover 
    id="profilePopover" 
    title={`${props.greetingText} ${props.givenName || ''} ${props.surname || ''}`} 
    className="dropdown-menu open" 
    placement="bottom" 
    style={{ top: '43px;', left: '-100px' }} 
    > 
    { 
     props.links.map(link => (
     <li className="menuitem"> 
      <a href={link.url} target={link.target} className="dropdown-link"> 
      {link.title} 
      </a> 
     </li> 
    )) 
    } 
    </Popover> 
);