ReactJs私は次のコードリアクトていレイアウト

Question

破るラッパーのdivが必要です。それは投げるので、

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>; 

を今すぐメニューの内容は、そのすべての項目がキーを必要とする、配列です。