React 和 Flask-Restful - 如何渲染 Jinja 模板

Question

我正在使用前端的 React 构建一个 RESTful Flask API。

我希望能够使用 React 获取和上传数据，但首先使用 Flask 在服务器端渲染我的 Jinja 模板。这是我目前所拥有的：

---

反应

Seeds.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;

---

烧瓶

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

---

神社

seeds.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>

我设法获取了我的数据，但没有进行任何渲染。

如何调整代码以便在获取数据的同时呈现我的模板？

Answer 1

我假设你想在 react 组件中渲染 seed.html，因为你在 react 组件中有这段代码：

render(){
        let seeds_page;
        seeds_page = this.setState.template;

        return (
           <div className="form">
            {seeds_page}
           </div>
        );
    }

要实现此操作，您需要确保您的seeds.html 文件具有与JSX 相同的语法。例如，这段代码在你的 react 组件中不起作用：

<h1 class='title'>Some title</h1>

因为 react 使用 className 而不是 class。所以，你需要重写你的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;