我正在使用带有ReactJS前端的Flask Backend开发一个应用程序.ReactJS应用程序已经开发并与webpack捆绑在一起.
与捆绑在一起的客户端渲染一切正常webpack.
我现在正在尝试使用python-react添加服务器端渲染.
但问题是,我必须通过具有根组件节点的Jinja2 template基本模板与我的ReactJS应用程序共享一些变量.index.htmlreactjs<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.
解决这个问题的最佳方法是什么？
serverside-javascript flask reactjs webpack isomorphic-javascript
我有一个具有以下目录结构的ReactJS应用程序,
App/
- components
- - SubComponent1
- - - components
- - - - SubSubComponent1
- - - - - components
- - - - - ....
- - - - - SubSubCompoent1.js
- - - SubComponent1.js
- - SubComponent2
- - ...
- - SubComponent3
- - ...
- stores
- actions
- app.js
模块组件的设计使其所有子组件都保留在组件文件夹下的自己的目录中.
组件也有自己的组件,它们也驻留在父组件文件夹中的组件文件夹中.
因此创建了一个相对导入问题,并且嵌套这么多级别会变得混乱.
如果我在根应用程序组件下创建所有组件,那么将会有很多组件,谁在使用哪个组件将是一个问题.
那么我要问的是这种场景的最佳目录结构是什么？
在webpack配置中添加这个,
resolve: {
root: __dirname + PATH_TO_APP_ROOT
}
现在你可以用require('dir/file.js')而不是require('../../../../dir/file.js')