React: ИспользованиС React.addons.CSSTransitionGroup добавляСт Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ <span>?</span>

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 20 июн. 2015  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: facebook/react

Π—Π΄Π΅ΡΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ошибка ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈ Π½Π΅Ρ‚. Если Π½ΡƒΠΆΠ½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ 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>

Если я дСлаю Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π½Π΅ Ρ‚Π°ΠΊ, ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΌΠ½Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅! ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я пропустил, Π±Ρ‹Π»Π° Π·Π°ΠΌΠ΅Ρ‚ΠΊΠ°!

Бпасибо, рСбята, ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ Π΄ΡƒΡ…Π΅!

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π­Ρ‚Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° ΠΌΠΎΠ³Π»Π° Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΊΡ€Ρ‹Ρ‚Π°, Π½ΠΎ использованиС React.Fragment Π² качСствС свойства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Ρ€Π΅ΡˆΠΈΠ»ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ для мСня.

<ReactCSSTransitionGroup
    component={React.Fragment}
    transitionName="slide"
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}
 >
 ....
</ReactCSSTransitionGroup>

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π― ΡΡ‡ΠΈΡ‚Π°ΡŽ, Ρ‡Ρ‚ΠΎ это Π·Π°Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ CSSTransitionGroup .

Π‘ΠΎΠ»ΡŒΡˆΠΎΠ΅ спасибо! Π― пропустил эту подпись! @garetht

Π­Ρ‚Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° ΠΌΠΎΠ³Π»Π° Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΊΡ€Ρ‹Ρ‚Π°, Π½ΠΎ использованиС React.Fragment Π² качСствС свойства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Ρ€Π΅ΡˆΠΈΠ»ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ для мСня.

<ReactCSSTransitionGroup
    component={React.Fragment}
    transitionName="slide"
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}
 >
 ....
</ReactCSSTransitionGroup>
Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ