Verzögerung beim Rendern einer Komponente?

Question

Ich versuche, meine eigene persönliche Website zu erstellen, und versuche, React dafür zu verwenden. In diesem Prozess beabsichtige ich, jede Sektion zu einer anderen React-Komponente zu machen. Mein Plan ist, dass die Navigationsleiste oben auswählen kann, welche Komponente gerade "aktiv" ist und tatsächlich gerendert und angezeigt wird. Außerdem möchte ich, wenn ich zu einem neuen Abschnitt wechsele, dass die alte Komponente eine "Verlassen" -Animation hat und die neue Komponente eine "Eingabe" -Animation (diese wird mit react-motion ausgeführt). Momentan werden jedoch sowohl das Eintreten als auch das Verlassen gleichzeitig ausgeführt, da ich den aktiven Zustand für beide Komponenten gleichzeitig ändere. Gibt es eine Möglichkeit zu verzögern, dass eine Komponente aktiv wird, nachdem eine andere inaktiv geworden ist?

Die übergeordnete Komponente, die jeden Abschnitt beherbergt sieht so aus:

class Home extends React.Component{ 

    render() { 
    let content = (
     <div> 
     Home 
     </div> 
    ) 

    if (!this.props.active){ 
     return (
     //Some jsx that results in the content leaving the page 
    ) 
    } 

    return(
     //Some jsx that results in the content entering the page 
    ) 
    } 
} 

Answer 1

Ich habe nicht eine Menge Zeit:

class Website extends React.Component { 

    constructor(props){ 
    super(props) 
    this.state = { 
    homeActive: true, 
    aboutActive: false 
    } 

    homeActivator(){ 
    this.setState({ 
     homeActive: true, 
     aboutActive: false 
    }) 
    } 

    aboutActivator(){ 
    this.setState({ 
     homeActive: false, 
     aboutActive: true 
    }) 
    } 

    render(){ 
    return (
     <div> 
     <NavBar handleHome={this.homeActivator.bind(this)} handleAbout= 
      {this.aboutActivator.bind(this)}/> 
     <Home active={this.state.homeActive} /> 
     <About active={this.state.aboutActive} /> 
     </div> 
} 

Und dann eines der „Sektionen“ wie so aussehen würde, um dies zu beantworten, aber ich fand das beste Beispiel, das ich konnte. Es ist keine exakte Replik von dem, was Sie suchen, aber es ist sehr ähnlich, wenn Sie es also verstehen, können Sie Ihr Problem ziemlich leicht herausfinden.

Um die Dinge ein wenig leichter zu verstehen, imitieren ich Komponenten mit Methoden innerhalb der React-Klasse. Offensichtlich würden Sie in der realen Welt Ihre Komponenten aus anderen Dateien importieren. Ich bin sicher, du wirst verstehen, was vor sich geht.

export default class Example extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     c1: true, 
     c2: false 
    } 
    } 

    // Component One 
    renderc1() { 
    return (
     <div> 
     I am component one 
     </div> 
    ) 
    } 

    // Component Two 
    renderc2() { 
    return (
     <div> 
     I am component two 
     </div> 
    ) 
    } 

    changeComponents =() => { 
    this.setState({ c1: false }) 

    setTimeout(() => { 
     this.setState({ c2: true }) 
    }, 1500) 
    } 

    render() { 
    return (
     <div className="example"> 

     {this.state.c1 ? this.renderc1() : null} 
     {this.state.c2 ? this.renderc2() : null} 

     <button onClick={this.changeComponents}>Click me</button> 

     </div> 
    ) 
    } 
} 

Durch Klicken auf die Schaltfläche wird die changeComponents Funktion, die dann sofort den Zustand von „c1“ auf falsch gesetzt wird abfeuern. Ein setTimeout nach diesem Zeitpunkt stellt sicher, dass Komponente 2 das Rendern auf dem Bildschirm verzögert.

Beachten Sie die Pfeilsyntax, die ich verwendet habe, die das This-Schlüsselwort an die Klasse bindet, so dass Sie sich nicht darum sorgen müssen, überall zu binden.