Zarządzanie obiektem "okno" w aplikacji izomorficznej za pomocą ReactJS i Flask Python

Zajmuję się tworzeniem aplikacji z Flask Backend z frontem ReactJS. Aplikacja ReactJS została opracowana i dołączona do pakietu internetowego.Zarządzanie obiektem "okno" w aplikacji izomorficznej za pomocą ReactJS i Flask Python

Wszystko działa poprawnie z renderowaniem po stronie klienta, dołączonym do webpack.

Próbuję teraz dodać renderowanie po stronie serwera z python-react.

Ale problemem jest to, muszę podzielić się kilka zmiennych do mojego ReactJS aplikacji poprzez Jinja2 template w szablonie bazowym index.html który ma składnik główny węzeł reactjs<div id='react-node'></div>.

miałem wysłać moje routes i config do mojej aplikacji poprzez jinja2 szablon jak poniżej,

//index.html 

<!doctype html> 
<html> 
... 
... 

<script type='text/javascript'> 
    var STATIC_IMAGE_ROOT = "{{ url_for('static', filename='img/') }}"; 
    var ROUTES = { ... }; 
... 
</script> 

</html>

Wszystkie powyższe js zmienne są ustawione na globalnym window obiektu.

Ale gdy próbuję wyrenderować komponent w python, rzuca wyjątek dla window obiektu ReactRenderingError: react: ReferenceError: window is not defined.

Jaki jest najlepszy sposób rozwiązania tego problemu?

Źródło

2015-06-24 Ibrahim

Hi! Używasz strony 'React.renderToString' (lub' React.renderToStaticMarkup')? – Jean

Podczas renderowania na serwerze nie ma globalnego okna. Można tworzyć fałszywe okno należy sprawdzenie, czy istnieje okno:

if (typeof(window) == 'undefined'){ 
    global.window = new Object(); 
}

Alternatywnie, można użyć jsdom lub podobne biblioteki do tworzenia fałszywego DOM.

Źródło

2015-06-24 19:45:32 Mark

lol który plik kpisz z fałszywego okna? –

Im bliżej do inicjalizacji aplikacji tym lepiej, w węźle, gdy definiujesz coś na globalnym jest dostępne dla wszystkich plików. Jeśli twój 'npm start' uruchamia skrypt o nazwie index.js, spróbuj go zdefiniować w pliku index.js lub jednym z plików wymaganych przez index.js. – TigerC10

Wystarczy dodać następujące WebPACK config:

// By default, Webpack is set up to target the browser, 
    // not a Node environment. Try setting target in your config: 
    target: 'node',

Źródło

2016-03-01 14:39:41

Zarządzanie obiektem "okno" w aplikacji izomorficznej za pomocą ReactJS i Flask Python

Odpowiedz

Powiązane problemy