2017-01-06 17 views
0

Ich bin bedingungslos Stil basierend auf dem Staat übergeben. Ich möchte die Transformation anwenden, nachdem die Komponente gerendert wurde, da sonst der Übergang nicht stattfindet. Mir wird gesagt, der beste Weg, dies zu erreichen, ist durch setTimeout, aber wie kann ich die Rückgabe einer Funktion Timeout Timeout?SetTimeout bei Rückgabe einer Funktion?

style= { 
    transition: 'transform 1s', 
    ...this.zoomedIn && this.mobileZoom(i), 
} 

zoomedIn() { 
    return ['zoomIn', 'addBg', 'zoom', 'removeBg'].includes(this.state.zoom) 
} 

mobileZoom() { 
    const transform = this.state.transform.mobile 
    if (window.innerWidth < 600) { 
    return { 
     zIndex: 1070, 
     transform: 'translateY(' + transform.offset + 'px) scale(' + transform.scale + ')' 
    } 
    } 
} 
+0

Ein wenig verwirrt, du meinst Sie eine Funktion nach einer ausführen möchten DOM-Element wird gerendert? – bugfroggy

+2

'Wie kann ich die Rückgabe einer Funktion Timeout Timeout?' Sie können nicht die Rückkehr Timeout. 'setTimeout' ist ein Endzustand und was auch immer darin ist, wird verarbeitet _later_ - wenn Sie einfach eine' return' setzen, dann haben Sie eine Funktion, die _later_ ausführt, einen Wert erzeugt und diese dann den Göttern der Müllsammlung als nichts anderes opfert hebt es auf. Sie können beispielsweise ein Versprechen abgeben und handeln, wenn das Versprechen erfüllt ist, oder den Code im 'setTimeout' mit etwas unabhängigem in Verbindung bringen, sodass es sich nicht auf etwas anderes verlässt, das den Wert" abruft ". – vlaz

+0

Ich weiß nicht viel über React, aber ich würde annehmen, dass es einen Komponentenlebenszyklus ähnlich wie Angular mit einem Äquivalent zu "onInit" gibt, das sicherstellen würde, dass der von Ihnen ausgelöste Vorgang erwartungsgemäß ausgeführt wird. Wenn es sich um eine Kindkomponente handelt, gibt es wahrscheinlich einen "onChildrenRender" oder so etwas. Alternativ könnten Sie ein Event von der gerenderten Comp an das Parent übergeben, damit es weiß, dass das Kind bereit ist, aber das ist wahrscheinlich auch nicht notwendig. Ich habe festgestellt, mit Timer für diese Art von Sache ist eine Gefahr. Ich wäre überrascht, wenn React dafür keinen robusten Komponenten-Lebenszyklus hätte. –

Antwort

0

Sie können nicht Wert aus der Funktion zurück, wenn Sie den Rückgabewert auf setTimeout-Funktion eingestellt, aber Sie können dies tun:

zoomedIn() { 
var send = new promise(function(resolve, reject) { 
    setTimeout(function() { 
     resolve(['zoomIn', 'addBg', 'zoom', 'removeBg'].includes(this.state.zoom)); 
    }); 
    }); 
    return send; 
} 

//call function like this 

zoomedIn().then(function(value) { 
    console.log(value); 
});