如何使用javascript和react组件从flask应用程序中的数据库打印数据？

我是js的新手，我会做出反应。我想使用javascript和react在html页面中打印数据库中的一些数据。我有一个简单的Flask应用程序，它在数据库中存储一些表单问题和可能的答案。我想在React组件中动态打印它们。有没有办法根据问题的数量在循环中创建组件？ 下面是我的Python代码片段：

@app.route('/form.html')
def form():
    form_data = db.get_all_questions()
    return render_template("form.html", data=form_data)

这是我的form.html：

            <div class="questions">
                <div class="question" id="question1">
                </div>
                 <div class="question" id="question2">
                </div>
                <div class="question" id="question3">
                </div>   
            </div>

这是我的js文件：

class Question extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <p>{this.props.content}</p>
        <p>{this.props.id}</p>
        <div className="rating_scale">
          <form>
            <label>
              <input type="radio" name="rad" value="1" />
              <span>1</span>
            </label>
            <label>
              <input type="radio" name="rad" value="2" />
              <span>2</span>
            </label>
            <label>
              <input type="radio" name="rad" value="3" />
              <span>3</span>
            </label>
            <label>
              <input type="radio" name="rad" value="4" />
              <span>4</span>
            </label>
            <label>
              <input type="radio" name="rad" value="5" />
              <span>5</span>
            </label>
          </form>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Question content= "question 1" />,
  document.querySelector("#question1")
);
ReactDOM.render(
  <Question content= "question 2" />,
  document.querySelector("#question2")
);
ReactDOM.render(
  <Question content= "question 3" />,
  document.querySelector("#question3")
);

类问题扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.content}

{this.props.id}

1.
2.
3.
4.
5.
);
}
}
ReactDOM.render(
,
文件查询选择器（“问题1”）
);
ReactDOM.render(
,
文件查询选择器（“问题2”）
);
ReactDOM.render(
,
文件查询选择器（“问题3”）
);

在HTML中，我可以循环抛出我的问题，如下所示：

{% for question in data %}
            <tr>
                <td>{{ question['question_id'] }}</td>
                <td>{{ question['question_text'] }}</td>
                <br>
                {% for AnswerId, Answer in question['possible_answers'].items()%}
                 <td> {{AnswerId}} : {{Answer}} </td>
                <br>
                {% endfor %}
            </tr>
{% endfor %}

{%用于数据%中的问题]
{{问题['question_id']}
{{问题['question_text']}


{%对于AnswerId，回答问题['mably_answers']。items（）%}
{{AnswerId}}:{{Answer}


{%endfor%}
{%endfor%}

---

但是如何在javascript中获得类似的行为呢？我只是不想硬编码所有的问题div，而是根据问题的数量动态创建包含该div的react组件。在内容道具中，我想显示问题文本。

我本来想留下评论，但时间越来越长了

从react组件的角度来看，要让它访问数据，只需将其作为道具传递

但是，如果react应用程序中还没有这些数据，则首先需要这些数据。我建议您在flask应用程序中创建一条返回此数据的路径。看看怎么做

然后，您应该能够从您的react应用程序中发出获取此数据的请求。看。

---

然后，您应该能够映射响应中的元素，并为每个问题创建一个组件。

因此解决方案是我认为最简单的。我可以访问html格式的数据，只需键入：

{{data}}

所以我创建了div：

<div id="mydiv" data-questions='{{ data|tojson }}'></div>

---

也许这不是最好的解决方案，但目前效果不错。现在，我必须映射元素并为每个问题创建一个组件。

您可以使用映射为每个问题创建一个组件。关于这一点的介绍可以在感谢中找到，但如何访问我的数据？为了避免混淆，首先让我问一下：您需要访问哪些数据，当前存储在哪里，需要去哪里？数据存储在数据库中，我的flask应用程序可以访问它。我可以像上面显示的那样，在html的for循环中打印它。数据只是一些json。我的问题是，例如，我可以用html创建一些段落，并将{{data}}放在它们之间。它可以打印我的全部数据，但我想在react组件中执行类似的操作，并将其呈现到这个html段落中。所以我想在我的js文件中访问这些数据。谢谢！我将尝试此解决方案，并让您知道它是否解决了我的问题

var guestions = JSON.parse(document.getElementById("mydiv").dataset.questions);