Tepki SSR - tutamak penceresi. Yükseklik/genişlik

Question

SSR FlowRouter ile React kullanıyorum. Bu nedenle çizgilerin

:

Çünkü istemci ve sunucu kodu arasındaki farkın kazandığını biliyorum Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server.

(I erişimi yok:

var height = (Meteor.isClient ? window.innerHeight : 0); 
<div style={{top: height+'px' }}> 

Böyle bir uyarı olsun sunucumdaki pencere).

Bu uyarıdan kaçınmanın bir yolu var mı?

Answer 1

Karşılaştığınız uyarı, sunucuda ve istemcide başlangıçta oluşturulmuş html arasında bir sağlama hatası nedeniyle oluşur. Doğru bir şekilde belirttiğiniz gibi, sunucuda window nesnesine sahip olmadığınızdan, window.innerHeight hesaplayamıyorsunuz. Bu, işlenen html'nin div'un style özniteliğinde farklılık göstermesine ve bu uyarıya neden olmasına neden oluyor.

Geçici bir bileşeninin state için height değişken hareket ve ayarlayın 0 bir başlangıç ​​durumuna sonra componentWillMount check

this.setState({height: (Meteor.isClient ? window.innerHeight : 0)}); 

gerçekleştirmek ve burada doğru yüksekliğini ayarlamak için olacaktır. Bu şekilde, hem istemci hem de sunucunun ilk render işlemi aynı olurdu. Ancak, componentDidMount yalnızca istemcide çağrıldığı için, state değiştirildiği zaman, bileşen ile window arasında yeniden işlenecektir. Eğer kasıtlı olarak sunucu ve istemci üzerinde farklı bir şey işlemek gerekiyorsa docs

itibaren

, bir iki geçişli oluşturmayı yapabilirsiniz. İstemcide farklı bir şey oluşturan bileşenler, gibi gibi bir durum değişkenini okuyabilir ve componentDidMount()'da true olarak ayarlayabilirsiniz. Bu şekilde, ilk render geçişi sunucuyla aynı içeriği oluşturarak uyumsuzluklardan kaçınacaktır, ancak hidrasyondan hemen sonra eşzamanlı olarak bir ek geçiş gerçekleşecektir. Bu yaklaşımın bileşenlerinizi yavaşlattığını, çünkü iki kez oluşturmaları gerektiğini unutmayın, bu yüzden dikkatli kullanın.