material-ui 中的弹出框 - 使用组件时显示故障

Question

这是一个微不足道的问题，但我没有看到问题到底出在哪里。

据我所知，React 提供了将内容拆分为（在某种程度上）独立组件的能力，从而使页面更清晰，因为并非所有内容都被塞进一个巨大的 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>