React: El uso de React.addons.CSSTransitionGroup agrega un extra <span>?</span>

Creado en 20 jun. 2015  ·  3Comentarios  ·  Fuente: facebook/react

Puede ser un error del usuario aquí, pero tal vez no. Usando ECMA2015 + babel si importa.

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

renders (en mi aplicación):

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

Sin embargo, si trato de meterme con 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>
        );

renderiza con estos intervalos adicionales:

<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 estoy haciendo algo mal, ¡apúnteme en la dirección correcta! ¡Quizás había una nota en los documentos que me perdí!

Gracias chicos, sigan con el gran trabajo!

Comentario más útil

Es posible que este problema se haya cerrado, pero el uso de React.Fragment como propiedad del componente resolvió el problema para mí.

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

Todos 3 comentarios

Creo que este es el comportamiento documentado de CSSTransitionGroup .

¡Muchas gracias! ¡Me perdí esa firma! @garetht

Es posible que este problema se haya cerrado, pero el uso de React.Fragment como propiedad del componente resolvió el problema para mí.

<ReactCSSTransitionGroup
    component={React.Fragment}
    transitionName="slide"
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}
 >
 ....
</ReactCSSTransitionGroup>
¿Fue útil esta página
0 / 5 - 0 calificaciones