酥料餅的材料的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>