如何在反应中使用多个标签渲染嵌入式 html

Question

我正在嵌入一个请求表。 我想在反应中单击一个按钮以打开表单，然后将一个按钮添加到 go 后退/退出。 我已经将 HTML 标签添加到 index.html 但我很难控制。 我切换显示：none/block 以使其出现/消失，这很好用（还必须切换所有反应应用程序的显示，以便只显示表单。）。

我尝试嵌入的 Html 有 3 个标签。 我无法找到如何使用带多个标签的 dangerouslySetInnerHTML 的答案。

我也刚刚尝试过两次使用 dangerouslySetInnerHTML 并为反应 div 提供了所需的参考 ID。 没有运气，只是一个空白的白页。

<div id="f6f2802e-49e8-477b-b405-8b2b18dded97"></div>
<link rel="stylesheet" media="screen" href="https://d3ey4dbjkt2f6s.cloudfront.net/assets/external/work_request_embed.css" />
<script src="https://d3ey4dbjkt2f6s.cloudfront.net/assets/static_link/work_request_embed_snippet.js" clienthub_id="f6f2802e-49e8-477b-b405-8b2b18dded97" form_url="https://clienthub.getjobber.com/client_hubs/f6f2802e-49e8-477b-b405-8b2b18dded97/public/work_request/embedded_work_request_form"></script>

Answer 1

12小时的尝试。 （ https://codesandbox.io/s/l9qmrwxqzq ）这很快就奏效了。 一旦我找到它。

'''
import React from "react";
import ReactDOM from "react-dom";
import { Helmet } from "react-helmet";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Check if Helmet works as expected with script tags</h1>
      <p>Check console output - you will see $ is undefined</p>
      <Helmet>
        <script
          src="https://code.jquery.com/jquery-3.3.1.min.js"
          integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossorigin="anonymous"
        />
        <script>
          {`
            console.log('Test', typeof $);
          `}
        </script>
      </Helmet>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
'''

我的最终产品

'''
import React from "react";
import { Helmet } from "react-helmet";

export default class Jobber extends React.Component {
  render() {
    return (
      <div className="Application" id="f6f2802e-49e8-477b-b405-8b2b18dded97">
        <Helmet>
            <div id="f6f2802e-49e8-477b-b405-8b2b18dded97"></div>
          <link
            rel="stylesheet"
            media="screen"
            href="https://d3ey4dbjkt2f6s.cloudfront.net/assets/external/work_request_embed.css"
          />
          <script 
            src="https://d3ey4dbjkt2f6s.cloudfront.net/assets/static_link/work_request_embed_snippet.js" clienthub_id="f6f2802e-49e8-477b-b405-8b2b18dded97" form_url="https://clienthub.getjobber.com/client_hubs/f6f2802e-49e8-477b-b405-8b2b18dded97/public/work_request/embedded_work_request_form"
            />

        </Helmet>
      </div>
    );
  }
}
'''