Ich arbeite an einem Reactjs + React-motion-Projekt in einem "modalen Fenster" (sagen wir mal). Ich möchte eine Komponente dynamisch mounten oder laden, wenn dies möglich ist.

Meine bisherige Lösung: Ich konnte keinen Weg finden, daher ist es anscheinend einfacher, die Komponente einzurichten und auszublenden, dann eine Klasse oder einen Stil bei Statusänderung umzuschalten und die verborgene Komponente erst nach dem " modales Fenster "Übergang beendet.

Sharing einige Code unten, wo es einfacher ist zu verstehen, was ich versuche zu tun. Es gibt keine Ereignishandler und der meiste Code wurde entfernt, aber dasonRest (der Ereignis-Rückruf, wenn die Animation beendet ist, wird angezeigt) und auch die Render-Fn.

class HomeBlock extends React.Component {

    constructor (props) {
        ...

    }

    ...

    motionStyleFromTo () {

        return {
            ...
        };

    }

    onRest () {

        // this is triggered when the Motion finishes the transition

    }

    render () {

        return (
            <Motion onRest={this.onRestCallback.bind(this)} style={this.motionStyleFromTo()}>
                {style =>
                    <div className="content" style={{
                        width: `${style.width}px`,
                        height: `${style.height}px`,
                        top: `${style.top}px`,
                        left: `${style.left}px`
                        }}>
                        [LOAD COMPONENT HERE]
                    </div>
                }
            </Motion>
        );

    }

}

export default HomeBlock;