React: React.addons.CSSTransitionGroupを使用すると、余分な<span>?</span>

作成日 2015年06月20日  ·  3コメント  ·  ソース: facebook/react

ここではユーザーエラーである可能性がありますが、そうではない可能性があります。 重要な場合は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>

私が何か間違ったことをしているなら、私を正しい方向に向けてください! たぶん、私が見逃したドキュメントにメモがありました!

みんなありがとう、素晴らしい仕事を続けてください!

最も参考になるコメント

この問題は解決された可能性がありますが、コンポーネントプロパティとしてReact.Fragmentを使用すると、問題が解決しました。

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

全てのコメント3件

これはCSSTransitionGroup文書化された動作だと思います。

どうもありがとう! 私はその署名記事を逃しました! @garetht

この問題は解決された可能性がありますが、コンポーネントプロパティとしてReact.Fragmentを使用すると、問題が解決しました。

<ReactCSSTransitionGroup
    component={React.Fragment}
    transitionName="slide"
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}
 >
 ....
</ReactCSSTransitionGroup>
このページは役に立ちましたか?
0 / 5 - 0 評価