reactjs - React 和 Flask-Restful - 如何渲染 Jinja 模板
问题描述
我正在前端使用 React 构建 RESTful Flask API。
我希望能够使用 React 获取和上传数据,但首先使用 Flask 在服务器端渲染我的 Jinja 模板。这是我到目前为止所拥有的:
反应
种子.jsx
import React, { Component } from 'react';
import axios from 'axios';
class Seeds extends Component{
constructor (props) {
super(props);
this.state = {
restaurant:'',
email: '',
id: '',
username: '',
active: '',
admin: ''
};
};
componentDidMount() {
if (this.props.isAuthenticated) {
this.getSeeds();
}
};
getSeeds(event) {
const options = {
url: `${process.env.REACT_APP_WEB_SERVICE_URL}/seeds`,
method: 'get',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${window.localStorage.authToken}`
}
};
return axios(options)
.then((res) => {
console.log(res)
console.log(res.data.data)
this.setState({
restaurant: res.data.data[0].restaurant,
template: res.data.data[0].content
})
})
.catch((error) => { console.log(error); });
};
render(){
let seeds_page;
seeds_page = this.setState.template;
return (
<div className="form">
{seeds_page}
</div>
);
}
}
export default Seeds;
烧瓶
种子.py
seeds_bp = Blueprint('seeds',
__name__,
template_folder='templates',
static_url_path='static')
@seeds_bp.route('/seeds', methods=['GET', 'POST'])
def seeds():
user = User.query.filter_by(id=1).first()
response_object = {
'status': 'success',
'message': 'success',
'data': [{"user": user.restaurant,
"content": "seeds.html"}]
}
return jsonify(response_object), 200
金贾
种子.html
{% include 'partials/head.html' %}
<section id="woz-content" >
<div class="container">
<h1 class="page-title">Menu(edit)</h1>
</div>
<div class="container">
<h2 class="page-title">Seeds</h2>
<ul style="list-style:none" >
<li><form action="{{ url_for('seeds.handle_seeds') }}"method="post">Seed1
<input type="text" name="seed1"/>
<label style="font-size: 11px;"></label>
<input type="submit" value="seed" >
</form>
</li>
<li><form action="{{ url_for('seeds.handle_seeds') }}" method="post">Seed2
<input type="text" name="seed2"/>
<label style="font-size: 11px;"></label>
<input type="submit" value="seed" >
</form></li>
</ul>
</div>
我设法获取我的数据,但没有进行渲染。
如何调整代码以便在获取数据时呈现我的模板?
解决方案
我假设您想在 react 组件中呈现 seed.html,因为您在 react 组件中有以下代码:
render(){
let seeds_page;
seeds_page = this.setState.template;
return (
<div className="form">
{seeds_page}
</div>
);
}
要实现此操作,您需要确保您的 seed.html 文件具有与 JSX 相同的语法。例如,此代码在您的反应组件中不起作用:
<h1 class='title'>Some title</h1>
因为反应使用类名而不是类。所以,你需要重写你的seeds.html 使其类似于JSX 语法或找到react 模块可以将html 模板解析为JSX 代码。这将类似于:
{% include 'partials/head.html' %}
<section id="woz-content" >
<div className="container">
<h1 className="page-title">Menu(edit)</h1>
</div>
...
</section>
然后你可以使用 render_template 函数渲染模板:
from flask import render_template
@seeds_bp.route('/seeds', methods=['GET', 'POST'])
def seeds():
user = User.query.filter_by(id=1).first()
example = "some example"
template = render_template('seeds.html', example=example)
response_object = {
'status': 'success',
'message': 'success',
'data': [{"user": user.restaurant,
"content": template}]
}
return jsonify(response_object)
然后,您可以通过 axios 请求获取模板并以模板状态保存。要将模板字符串转换为 React 组件,您可以使用React HTML Parser将 HTML 字符串转换为 React 组件的实用程序。所以 Seeds.jsx 将与此类似:
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 }
from 'react-html-parser';
class Seeds extends Component{
constructor (props) {
super(props);
this.state = {
restaurant:'',
email: '',
id: '',
username: '',
active: '',
admin: '',
template: ''
};
};
// ...
render(){
var seeds_page = this.state.template;
return (
<div className="form">
{ ReactHtmlParser(seeds_page) }
</div>
);
}
}
export default Seeds;
推荐阅读
- php - 为什么我应该在 php 中使用 reset($arr) 而不是 $arr[0] 来生成 php 中数组的第一个元素?
- kubernetes - Kubernetes 仪表板错误消息:禁止配置映射:用户“system:serviceaccount:kube-system:deployment-controller”无法列出资源
- postgresql - Postgresql 12 CAST now() 迄今为止无法正常工作
- c++ - 如何在 dlib 中重复矩阵?
- react-native - ScrollView 完全占用父空间
- python - 从数据库中读取整个项目以开始或在需要时进行第二次调用
- python - 如何在 Jupyter 中为 Pandas 样式添加水平滚动
- jenkins - 如何设置我的 Jenkinsfile 以便仅在选择另一个参数时才出现某些参数?
- amazon-web-services - 无法使用启用的 VPC 从第一个 Lambda 调用第二个 Lambda
- python - 如何修复我的 pandas 代码,以便正确比较来自两个不同时间点的观察结果?