React: Menggunakan React.addons.CSSTransitionGroup menambahkan tambahan <span>?</span>

Dibuat pada 20 Jun 2015  ·  3Komentar  ·  Sumber: facebook/react

Mungkin kesalahan pengguna di sini, tapi mungkin tidak. Menggunakan ECMA2015 + babel jika itu penting.

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

merender (di aplikasi saya):

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

Namun, jika saya mencoba mengacaukan 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>
        );

merender dengan rentang ekstra ini:

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

Jika saya melakukan sesuatu yang salah, tolong arahkan saya ke arah yang benar! Mungkin ada catatan di dokumen yang saya lewatkan!

Terima kasih teman-teman, teruslah bekerja dengan baik!

Komentar yang paling membantu

Masalah ini mungkin telah ditutup, tetapi menggunakan React.Fragment sebagai properti komponen memecahkan masalah bagi saya.

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

Semua 3 komentar

Saya percaya ini adalah perilaku yang didokumentasikan dari CSSTransitionGroup .

Terima kasih banyak! Saya melewatkan byline itu! @garetht

Masalah ini mungkin telah ditutup, tetapi menggunakan React.Fragment sebagai properti komponen memecahkan masalah bagi saya.

<ReactCSSTransitionGroup
    component={React.Fragment}
    transitionName="slide"
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}
 >
 ....
</ReactCSSTransitionGroup>
Apakah halaman ini membantu?
0 / 5 - 0 peringkat