这里可能是用户错误,但也可能不是。 如果重要的话,使用 ECMA2015 + babel。
return (
<div className={curtainClasses} style={this.props.curtainClass ? null : curtainStyle} onClick={this.props.clickHandler}>
<div key="_srm-modal" style={this.props.modalClass ? null : modalStyle} className={modalClasses}>
{this.props.children}
</div>
</div>
);
呈现(在我的应用程序中):
<div class="_srm-curtain modal-background" data-reactid=".0.0.1.1.0.0">
<div class="modal-pod" data-reactid=".0.0.1.1.0.0.$_srm-modal">
<h1 data-reactid=".0.0.1.1.0.0.$_srm-modal.0">Hello World</h1>
</div>
</div>
但是,如果我尝试使用 CSSTransitionGroup:
let ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
return (
<div className={curtainClasses} style={this.props.curtainClass ? null : curtainStyle} onClick={this.props.clickHandler}>
<ReactCSSTransitionGroup transitionName={this.props.transitionName}>
<div key="_srm-modal" style={this.props.modalClass ? null : modalStyle} className={modalClasses}>
{this.props.children}
</div>
</ReactCSSTransitionGroup>
</div>
);
使用这些额外的跨度进行渲染:
<div class="_srm-curtain modal-background" data-reactid=".0.0.1.1.0.0">
<span data-reactid=".0.0.1.1.0.0.0">
<div class="modal-pod" data-reactid=".0.0.1.1.0.0.0.$=1$_srm-modal">
<h1 data-reactid=".0.0.1.1.0.0.0.$=1$_srm-modal.0">Hello World</h1>
</div>
</span>
</div>
如果我做错了什么,请指出我正确的方向! 也许我错过了文档中的注释!
谢谢大家,继续努力!
我相信这是CSSTransitionGroup
的记录行为。
非常感谢! 我错过了那个署名! @garetht
这个问题可能已经解决了,但是使用 React.Fragment 作为组件属性为我解决了这个问题。
<ReactCSSTransitionGroup
component={React.Fragment}
transitionName="slide"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
....
</ReactCSSTransitionGroup>
最有用的评论
这个问题可能已经解决了,但是使用 React.Fragment 作为组件属性为我解决了这个问题。