React: Die Verwendung von React.addons.CSSTransitionGroup fügt ein zusätzliches <span>?</span>

Erstellt am 20. Juni 2015  ·  3Kommentare  ·  Quelle: facebook/react

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!

Hilfreichster Kommentar

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>

Alle 3 Kommentare

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>
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen