如何在反應中使用多個標簽渲染嵌入式 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>
    );
  }
}
'''