React: L'utilisation de React.addons.CSSTransitionGroup ajoute un <span>?</span>

Créé le 20 juin 2015  ·  3Commentaires  ·  Source: facebook/react

Peut-être une erreur de l'utilisateur ici, mais peut-être pas. Utiliser ECMA2015 + babel si c'est important.

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>
        );

rend (dans mon application):

<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>

Cependant, si j'essaie de jouer avec un 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>
        );

rend avec ces étendues supplémentaires :

<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>

Si je fais quelque chose de mal, merci de m'indiquer la bonne direction ! Peut-être qu'il y avait une note dans la doc que j'ai ratée !

Merci les gars, continuez votre excellent travail!

Commentaire le plus utile

Ce problème a peut-être été résolu, mais l'utilisation de React.Fragment en tant que propriété de composant a résolu le problème pour moi.

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

Tous les 3 commentaires

Je crois que c'est le comportement documenté du CSSTransitionGroup .

Merci beaucoup! J'ai raté cette signature ! @garetht

Ce problème a peut-être été résolu, mais l'utilisation de React.Fragment en tant que propriété de composant a résolu le problème pour moi.

<ReactCSSTransitionGroup
    component={React.Fragment}
    transitionName="slide"
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}
 >
 ....
</ReactCSSTransitionGroup>
Cette page vous a été utile?
0 / 5 - 0 notes