ΠΠ΄Π΅ΡΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΠΈΠ±ΠΊΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π° ΠΌΠΎΠΆΠ΅Ρ ΠΈ Π½Π΅Ρ. ΠΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ 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 Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΡΠ΅ΡΠΈΠ»ΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π΄Π»Ρ ΠΌΠ΅Π½Ρ.