酥料饼的材料的UI - 显示故障使用组件

Question

当它是一个微不足道的问题，但我没有看到哪里的问题恰好所在。

据我所知，作出反应提供拉东西分裂成，因为不是一切都塞进一个巨大的HTML文件，从而导致清洁页面（有点）独立组件的能力。或者我认为哲学就是如此。

基本上，我这样做的时候，一切工作正常：

<Popover open={this.props.popover === LoginPopoverState.LOGIN} 
     anchorEl={this.props.anchorEl} 
     onRequestClose={this.handleHideLogin.bind(this, dispatch)}> 
    <div style={loginStyle}> 
      <TextField hintText="Username oder E-Mail" ref="username_login" floatingLabelText="Username/E-Mail"/><br /> 
      <TextField hintText="Passwort" type="password" ref="password_login" floatingLabelText="Passwort" /><br /> 
      <RaisedButton label="Login" onTouchTap={e => this.handleLoginTap(e, dispatch)} /> 
      <p>Zur <a href="javascript://" onTouchTap={e => this.handleShowRegisterTap(e, dispatch)}>Registration</a>.</p> 
    </div> 
</Popover> 

，看起来像这样：

然而，当我拉出<div>到另一个模块，然后做像这样：

import LoginFragment from './loginBar/LoginFragment.jsx' 
<Popover open={this.props.popover === LoginPopoverState.LOGIN} 
     anchorEl={this.props.anchorEl} 
     onRequestClose={this.handleHideLogin.bind(this, dispatch)}> 
    <LoginFragment /> 
</Popover> 

其中LoginFragment.jsx包含这样的事情：

var LoginFragment = React.createClass({ 
    render() { 
     return (
      <TextField hintText="Username oder E-Mail" ref="username_login" floatingLabelText="Username/E-Mail"/> 
     ) 
    } 
}) 

导致在这个炎热的烂摊子：

那么，究竟是怎么回事？

Answer 1

它可以是一个CSS样式的问题，因为你地图无法包裹一个div里面你的领域了（现在你跳过应用到这个容器div的loginStyle。）

所以，在老版本你有：

<Popover ...> 
    <div style={loginStyle}> 
      <TextField ...><br /> 
      <TextField ...><br /> 
      <RaisedButton .../> 
      <p>...</p> 
    </div> 
</Popover> 

但你是什么，包括你的新版本，现在，使用单一LoginFragment成分，一旦扩大，将是这样的：

<Popover ...>   

      <TextField ...> 

</Popover> 

在这个版本中，包装div（和他们的样式）将会丢失。再次在代码中包含<div style={loginStyle}>可以修复任何CSS样式冲突，或者帮助查找并隔离问题。像这样：

import LoginFragment from './loginBar/LoginFragment.jsx' 
<Popover open={this.props.popover === LoginPopoverState.LOGIN} 
     anchorEl={this.props.anchorEl} 
     onRequestClose={this.handleHideLogin.bind(this, dispatch)}> 
    <div style={loginStyle}> 
     <LoginFragment /> 
    </div> 
</Popover>