ReactJs要求的包裝DIV打破了佈局

Question

我有以下陣營代碼：

render() { 
    return (
     <NavItem dropdown toggleOnHover className='collapse-left'> 

     <DropdownButton nav> 
      <Icon bundle='fontello' glyph='bullhorn' /> 
      {this.getBadge()} 
     </DropdownButton> 
     <Menu alignRight ref='bullhorn-menu' id='notifications-menu' className='double-width' alwaysInactive> 
      <MenuItem header> 
      <Entity entity='Notifications' /> 
      </MenuItem> 

      {this.state.notifications.map((item, index) => { 
      return (
       <Notification notification={item} key={index} /> 
      ) 
      })} 

      <MenuItem noHover> 
      <Grid collapse style={{marginBottom: -10}}> 
       <Row> 
       <Col xs={12} collapseLeft collapseRight> 
        <Button block className='notification-footer-btn left-btn'>MARK ALL READ</Button> 
       </Col> 
       </Row> 
      </Grid> 
      </MenuItem> 
     </Menu> 
     </NavItem> 
    ) 
    } 

上面的代碼不起作用，因爲它拋出：

react-with-addons.js:9729 Uncaught TypeError: Cannot read property 'toUpperCase' of undefined 

然而，當我包圍帶有div的map（）語句，它可以工作，但是會破壞佈局。

的Notification組件只是返回是這樣的：

<MenuItem href='/'> 
     <Grid> 
      <Row> 
      <Col xs={2} className='avatar-container' collapseRight> 
       <div><img src='/imgs/avatars/avatar22.png' width='40' height='40' alt='sarah_patchett' /></div> 
       <div className='text-center'> 
       <BLabel bsStyle='info'>NEW</BLabel> 
       </div> 
      </Col> 
      <Col xs={10} className='notification-container' collapseLeft collapseRight> 
       <div className='time'> 
       <strong className='fg-darkgray50'><Icon bundle='fontello' glyph='chat-5'/><em><Entity entity='notificationsTimeFirst' /></em></strong> 
       </div> 
       <div className='message-header'> 
       <strong className='fg-darkgreen45'>Sarah Patchett sent you a private message</strong> 
       </div> 
       <div className='message-details fg-text'> 
       <span>{"Hey Anna! Sorry for delayed response. I've just finished reading the mail you sent couple of days ago..."}</span> 
       </div> 
      </Col> 
      </Row> 
     </Grid> 
     </MenuItem> 

有人能告訴我如何剛剛超過我的數組循環，呈現通知組件，而周圍的DIV？

Answer 1

Currently it is not possible to return multiple components like that，所以你需要把它們包裝在一些東西。

爲什麼不只是改變容器的樣式，以便它不會破壞佈局？

例如：

<div style={{ display: "inline" }}> 
    {this.state.notifications.map((item, index) => { 
     return (
      <Notification notification={item} key={index} /> 
     ) 
    })} 
</div> 

或者，你可以這樣做：

let menuItems = [ 
    <MenuItem header key="header"> 
     <Entity entity='Notifications' /> 
    </MenuItem> 
].concat(notifications); 

return <Menu> 
    { menuItems } 
</Menu>; 

現在菜單的內容是一個數組，所以每一個項目需要的關鍵。