ここではユーザーエラーである可能性がありますが、そうではない可能性があります。 重要な場合は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>
私が何か間違ったことをしているなら、私を正しい方向に向けてください! たぶん、私が見逃したドキュメントにメモがありました!
みんなありがとう、素晴らしい仕事を続けてください!
これはCSSTransitionGroup
の文書化された動作だと思います。
どうもありがとう! 私はその署名記事を逃しました! @garetht
この問題は解決された可能性がありますが、コンポーネントプロパティとしてReact.Fragmentを使用すると、問題が解決しました。
<ReactCSSTransitionGroup
component={React.Fragment}
transitionName="slide"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
....
</ReactCSSTransitionGroup>
最も参考になるコメント
この問題は解決された可能性がありますが、コンポーネントプロパティとしてReact.Fragmentを使用すると、問題が解決しました。