在我的应用程序中从jinja2渲染模板

如何解决在我的应用程序中从jinja2渲染模板

我正在寻找从React中的api渲染模板的方法。

我的Python API看起来像这样

@app.route(`get_stats`,methods=['POST','GET'])

def get_stats():
return render_template(
        'stats_results.html',)

{% block head %}
{{ super() }}



{% endblock %}
{% block content %}







            
    <table class="table" >
        <thead>
            <tr>
            <th scope="col">Automation Team</th>
            <th scope="col">No of Test Cases #</th>
            <th scope="col">Automated #</th>
            <th scope="col">CLM-Supported #</th>
            <th scope="col">CLM-Executed #</th>
            <th scope="col">Pass Rate %</th>
            </tr>
        </thead>
        <tbody>
            {% for group_data in auto_group_sum %}
            <tr>
            <td>{{ group_data[0] }}</td>
            <td>{{ group_data[1] }}</td>
            <td>{{ group_data[2] }}</td>
            <td>{{ group_data[3] }}</td>
            <td>{{ group_data[4] }}</td>
            <td>{{ group_data[5] }}%</td>
            </tr>
            {% endfor %}
        </tbody>
    </table> 


    {% for result in group_data %}
        <h3>{{ result[0] }}</h3>
        <div id="chart">
            <embed type="image/svg+xml" src= {{ result[1]|safe }} />
        </div>

        <button class="accordion">Details</button>
        
        <br>
        
    
        


</div>



<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click",function() {
    /* Toggle between adding and removing the "active" class,to highlight the button that controls the panel */
    this.classList.toggle("active");
    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>


{% endblock content %}

并且我试图在这里将其显示在我的无状态React组件中：

async function getData(form) {
  console.log(form)
  let params = { form }
  let data = await axios.post('/get_stats',params)
  console.log(data.data)
  return data.data
}
export default function MultipleSelect() {
  const classes = useStyles()
  const theme = useTheme()
  
  let seeds_page
  const handleChange = (event) => {
   
    getData({})

    seeds_page = getData({})
  }

  const handleChangeMultiple = (event) => {
    const { options } = event.target
    const value = []
    for (let i = 0,l = options.length; i < l; i += 1) {
      if (options[i].selected) {
        value.push(options[i].value)
      }
    }
    setPersonName(value)
  }
  const htmlToParse = <div>Hi</div>

  return (
    <Card>
      <CardContent>
       
      <CardContent>
        
        <div className="form">
         {seeds_page}

       
        </div>
      </CardContent>
    </Card>
  )
}

有关如何执行此操作的任何想法？我已经尝试过React-html-parser，但无法正常工作。如有任何格式问题，我们深表歉意-这是stackoverflow的新功能。