Управление объектом «окно» в изоморфном приложении с помощью ReactJS и Flask Python

Я разрабатываю приложение с Flask Backend с фронтом ReactJS. Приложение ReactJS было разработано и связано с webpack.

Все отлично работает с рендерингом на стороне клиента, который связан с webpack.

Сейчас я пытаюсь добавить рендеринг на стороне сервера с помощью python-react.

Но проблема в том, что я должен поделиться некоторыми переменными с моим приложением ReactJS через Jinja2 template в базовом шаблоне index.html, который имеет reactjs узел корневого компонента <div id='react-node'></div>.

Мне пришлось отправить свои routes и config в мое приложение через шаблон jinja2, как показано ниже,

//index.html

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

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

</html>

Все вышеуказанные переменные js устанавливаются в глобальный объект window.

Но когда я пытаюсь отобразить компонент в python, он выдает исключение для объекта window ReactRenderingError: react: ReferenceError: window is not defined .

Каков наилучший способ решить эту проблему?


webpack reactjs flask isomorphic-javascript serverside-javascript
person Ibrahim    schedule 24.06.2015    source источник
comment
Привет ! Вы используете React.renderToString (или React.renderToStaticMarkup) серверную часть?   -  person Jean    schedule 24.06.2015

Ответы (2)


arrow_upward
5
arrow_downward

Глобального окна при рендеринге на сервере нет. Вы можете создать поддельное окно, сначала проверив, существует ли окно:

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

Кроме того, вы можете использовать jsdom или аналогичную библиотеку для создания фальшивого DOM.

person Mark    schedule 24.06.2015
comment
Чем ближе к инициализации приложения, тем лучше, в узле, когда вы определяете что-то глобальное, оно доступно для всех файлов. Если на вашем npm start запущен скрипт с именем index.js, попробуйте определить его в index.js или в одном из файлов, которые требуются index.js. - person TigerC10; 16.08.2016

arrow_upward
2
arrow_downward

Просто добавьте следующее в конфигурацию веб-пакета:

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