Kann hier ein Benutzerfehler sein, aber vielleicht auch nicht. Mit ECMA2015 + babel, wenn es darauf ankommt.
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>
);
rendert (in meiner App):
<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>
Wenn ich jedoch versuche, mich mit einer CSSTransitionGroup anzulegen:
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>
);
rendert mit diesen zusätzlichen Spannweiten:
<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>
Wenn ich etwas falsch mache, weisen Sie mich bitte in die richtige Richtung! Vielleicht gab es eine Notiz in den Dokumenten, die ich übersehen habe!
Danke Leute, macht weiter so!
Ich glaube, dies ist das dokumentierte Verhalten von CSSTransitionGroup
.
Ich danke dir sehr! Ich habe diese Verszeile verpasst! @garetht
Dieses Problem wurde möglicherweise behoben, aber die Verwendung von React.Fragment als Komponenteneigenschaft hat das Problem für mich gelöst.
<ReactCSSTransitionGroup
component={React.Fragment}
transitionName="slide"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
....
</ReactCSSTransitionGroup>
Hilfreichster Kommentar
Dieses Problem wurde möglicherweise behoben, aber die Verwendung von React.Fragment als Komponenteneigenschaft hat das Problem für mich gelöst.