这是一个微不足道的问题,但我没有看到问题究竟在哪里。
据我所知,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"/>
)
}
})
导致这个热点:
那么,这里发生了什么?
答案 0 :(得分:0)
它可能是一个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>