2017-01-06 15 views
0

私は条件に基づいてスタイルを渡しています。コンポーネントがレンダリングされた後に変換を適用したいのですが、それ以外の場合は変換が行われないためです。私はこれを達成するための最良の方法はsetTimeoutであると言われていますが、どのようにして関数の戻り値をタイムアウトすることができますか?関数の復帰時にSetTimeout?

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

少し混乱し、あなたが後に機能を実行したいわけDOM要素がレンダリングされますか? – bugfroggy

+2

'関数の返り値をタイムアウトするにはどうしたらいいですか? '返り値をタイムアウトすることはできません。 'setTimeout'は終了状態であり、処理される内部は何でも_later_ - 単に' return'を置くと_later_を実行して何らかの値を生成し、それをガベージコレクションの神に犠牲にしますそれを拾う。たとえば、約束が成立したときに約束を返して行動するか、 'setTimeout'連絡先のコードを何か独立したものにすることができます。そのため、値を単に"拾う "ことには依存しません。 – vlaz

+0

私はReactについてはあまりよく分かりませんが、Angularに似たコンポーネントライフサイクルが存在し、 "onInit"に相当すると仮定します。これは、トリガーしている操作が期待どおりに行われることを保証します。子コンポーネントの場合は、おそらく "onChildrenRender"などがあります。代わりに、レンダリングされたコンプから親にイベントをディスパッチして、子供が準備が整っていることを知らせることもできますが、おそらくそれはおそらく必要ないでしょう。 私はタイマーを使用していることが危険であることを発見しました。 Reactがこれに対して堅牢なコンポーネントライフサイクルを持っていなかったら私は驚くだろう。 –

答えて

0

あなたがsetTimeout関数にその戻り値を設定していますが、これを行うことができます場合は、関数から値を返すことはできません。

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); 
}); 
関連する問題