将React组件包装成div将它们弄乱

Question

我的游戏是这样的：

我使用react-contexify在React中创建自定义上下文菜单 这是我之前的代码：

<MenuProvider key="0">
  <Message
    className="ChatMessage"
    style={{ width: isMobile() ? "60%" : "40%", backgroundColor: "#424751" }}
  >
    <h3 className="Username">{this.props.username}</h3>
    :&nbsp;
    <p className={Boolean(this.props.rainbow) ? "RainbowMessage" : "Message"}>
      {this.props.children}
    </p>
  </Message>

  <Menu>
    <Item>Lorem</Item>
    <Item>Ipsum</Item>
    <Separator />
    <Item disabled>Dolor</Item>
    <Separator />
    <Submenu label="Foobar">
      <Item>Foo</Item>
      <Item>Bar</Item>
    </Submenu>
  </Menu>
</MenuProvider>

然后是我的代码：

<MenuProvider key="0">
                        <Message className="ChatMessage" style={{"width": isMobile() ? "60%" : "40%","backgroundColor": "#424751"}}>
                            <h3 className="Username">
                                {this.props.username}
                            </h3>
                            :&nbsp;
                            <p className={Boolean(this.props.rainbow) ? "RainbowMessage" : "Message"}>
                                {this.props.children}
                            </p>
                        </Message>

                        <Menu>
                            <Item>Lorem</Item>
                            <Item>Ipsum</Item>
                            <Separator />
                            <Item disabled>Dolor</Item>
                            <Separator />
                            <Submenu label="Foobar">
                            <Item>Foo</Item>
                            <Item>Bar</Item>
                            </Submenu>
                        </Menu>
                    </MenuProvider>

但是，此代码导致以下结果：

这与将其包裹在div中一样... 但为什么？怎么了？ 谢谢