Pode ser um erro do usuário aqui, mas talvez não. Usando ECMA2015 + babel se for importante.
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>
);
renderiza (em meu aplicativo):
<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>
No entanto, se eu tentar mexer com um 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 com estes spans extras:
<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>
Se eu estiver fazendo algo errado, por favor, me indique a direção certa! Talvez houvesse uma nota nos documentos que eu perdi!
Obrigado pessoal, continuem com o excelente trabalho!
Eu acredito que este é o comportamento documentado de CSSTransitionGroup
.
Muito obrigado! Eu perdi essa assinatura! @garetht
Esse problema pode ter sido resolvido, mas usar React.Fragment como propriedade do componente resolveu o problema para mim.
<ReactCSSTransitionGroup
component={React.Fragment}
transitionName="slide"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
....
</ReactCSSTransitionGroup>
Comentários muito úteis
Esse problema pode ter sido resolvido, mas usar React.Fragment como propriedade do componente resolveu o problema para mim.