一组辅助加载和渲染React组件的工具
项目描述
Django React Components
Django React Components是当与django-react-loader结合使用时，自动加载和渲染React组件的工具集。此工具目前处于测试版。
安装
使用pip安装django-react-components和django-webpack-loader
$ pip install django-react-components django-webpack-loader
将这两个模块添加到你的settings.py中的INSTALLED_APPS
INSTALLED_APPS = (
...,
'django_react_components',
'webpack_loader',
)
要求
Python
django-react-components依赖于django-webpack-loader Python模块。使用pip安装它
$ pip install django-webpack-loader
JavaScript
全局
django-react-components使用nwb编译React组件。全局安装它
$ npm install -g nwb
或
$ yarn global add nwb
本地
django-react-components使用webpack-bundle-tracker以及一个兄弟包django-react-loader来生成和渲染React组件。本地安装它们
$ npm install --save-dev django-react-loader webpack-bundle-tracker
或
$ yarn add django-react-loader webpack-bundle-tracker --dev
用法
配置
你需要创建一个名为nwb.config.js的文件来配置nwb以正确编译你的组件。查看nwb的（配置指南）[https://github.com/insin/nwb/blob/master/docs/Configuration.md#configuration-file]以获取更多详细信息。同时查看他们的（webpack配置选项）[https://github.com/insin/nwb/blob/master/docs/Configuration.md#webpack-configuration]。
在你的配置文件中，将django-react-loader添加到webpack部分。例如
// nwb.config.js
module.exports = {
webpack: {
...,
module: {
rules: [
{
loader: ['django-react-loader'],
},
],
},
}
};
该加载器将在传递给nwb配置文件的每个条目上运行。例如，如果你想要加载三个React组件
Comp1.js
Comp2.js
Comp3.js
你的配置文件可能看起来像这样
//nwb.config.js
module.exports = {
webpack: {
...,
entry: {
Comp1: './src/Comp1.js',
Comp2: './src/Comp2.js',
Comp3: './src/Comp3.js'
},
}
};
每个条目的默认导出将在加载时编译并附加到window上，使用配置文件中条目的键作为key，所以在我们这个例子中
window.Comp1 // The component at './src/Comp1.js'
window.Comp2 // The component at './src/Comp2.js'
window.Comp1 // The component at './src/Comp3.js'
django-react-components的模板标签将在附加到window的代码上运行初始化函数，使用传递给模板的props创建组件。
设置webpack-bundle-tracker
你还需要指定使用webpack-bundle-tracker打包javascript的位置。例如
var path = require('path')
var BundleTracker = require('webpack-bundle-tracker')
module.exports = {
webpack: {
...,
output: {
path: path.resolve('./dist/webpack_bundles/'), // Location for compiled files
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}), // Location for generated tracking file
],
}
};
编译React组件
使用nwb编译你的React源代码。确保包含-no-vendor标志
nwb build --no-vendor
渲染React组件
在你的模板中，你可以通过使用{% react_component %}或{% react %}模板标签来渲染React组件。为此
- 从
django_webpack_loader加载模板标签和render_bundle标签
{% load django_react_components %}
{% load render_bundle from webpack_loader %}
- 使用
render_bundle来引入适当的javascript
<head>
{% render_bundle 'runtime' %}
{% render_bundle 'App' %}
</head>
3a. 使用react_component标签以关键字参数作为props渲染组件
<body>
{% react_component 'App' id='app' prop1=prop1 prop2=prop2 %}
</body>
3b. 使用react/endreact标签来渲染包含渲染内容的组件。这将作为raw HTML传递给组件的children prop。
<body>
{% react 'App' id='app' %}
<h1>Hello World</h1>
<p>{{ content }}</p>
<a href='{% url 'endpoint' %}'>Link</a>
{% endreact 'App' id='app' %}
</body>
自定义Props编码
django_react_components使用JSON将props编码到React组件中。你可以在你的设置文件中使用DJANGO_REACT_JSON_ENCODER设置指定自定义JSON编码器类。它将被传递给json.dumps(props, cls=MyJSONEncoder)
要求
Python 3.4-3.7，Django 1.11-2.2
django-react-components-0.1.8a0.tar.gz 的哈希值
| 算法 | 哈希摘要 | |
|---|---|---|
| SHA256 | 6c89dc7dc7c8280291deaf0cd49b6a8dadc1032aa35c9f2cb2164d97a0bdf4fc |
|
| MD5 | 7fa5311f4c3e68ef1721c79865705896 |
|
| BLAKE2b-256 | 0ffe67aafc5ccdb1fd04def1278a230f05bdcfd7f9ea59c2b86a600fb5b2cd6c |