React - 将状态传递给使用 dangerouslysetHTML 呈现的模板

Question

在我的应用程序中，我在前端使用 React，在后端使用 Flask。

一些页面呈现静态内容，为此我直接从后端使用 Jinja2 模板。

因此，在前端，我从 Flask 获取我的模板作为响应对象并使用 dangerouslysetHTML 注入它，如下所示：

seeds.py

@seeds_bp.route('/seeds/<user_id>', methods=['GET', 'POST'])
def seeds(user_id):
    user = User.query.filter_by(id=user_id).first()
    template = render_template('seeds.html',items=items)
    response_object = {
                    'status': 'success',
                    'data': [{"content": template}]
    return jsonify(response_object), 200

获取数据后：

Seeds.jsx

    render(){
      const {userId} = this.props
      var seeds_html = this.state.seeds_template;
      var seeds_template = { __html: seeds_html };
      return (
         <div id="parent">
         <h1 className="title is-1"><font color="#C86428">Seeds</font></h1>
          <hr/><br/>
          <div dangerouslySetInnerHTML={seeds_template}/>
        </div>
      );       
    }
  }

问题是 我渲染的 html 中有重定向需要 user_id 以及 ，我无法访问它，所以我不能将我的 'user_id' 状态传递给我的模板：

seeds.html

<form action="{{ url_for('menus.edit_menu', items=items, user_id=user_id) }}" method="post">

是否有开箱即用的方法或任何其他自定义函数，以便我可以将此 'user_id' 状态传递给通过 dangerouslysetHTML 呈现的模板？

Answer 1

您可以使用 String.replace() 将变量注入您的模板，然后将其注入您的 dangerouslySetInnerHTML。像这样：

<form action="{{ url_for('menus.edit_menu', items=items, user_id=_user_id) }}" method="post">

然后：

render() {
  const { userId } = this.props;
  const seedsHtml = this.state.seeds_template;
  const template = { __html: seedsHtml.replace("_user_id", userId) };  
  return <div dangerouslySetInnerHTML={template} />;
}

React - 将状态传递给使用 dangerouslysetHTML 呈现的模板

React - pass state to template rendered with dangerouslysetHTML

reactjs

flask-restful