javascript - ReactJs 需要一个破坏布局的包装器 div

Question

我有以下 React 代码:

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>

谁能告诉我如何在我的数组上循环并呈现 Notification 组件，而无需周围的 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>;

现在菜单的内容是一个数组，所以每个项目都需要一个键。