javascript - 将 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 中是一样的……但是为什么呢？怎么了？谢谢

标签： javascripthtmlreactjsbabeljs