Reactjs 為除一個組件之外的所有組件添加 javascript 代碼

Question

我從 Tawk 獲得了以下聊天小部件代碼：-

 <script type="text/javascript">
      var Tawk_API = Tawk_API || {},
        Tawk_LoadStart = new Date();
      (function () {
        var s1 = document.createElement("script"),
          s0 = document.getElementsByTagName("script")[0];
        s1.async = true;
        s1.src = "https://embed.tawk.to/555555/default";
        s1.charset = "UTF-8";
        s1.setAttribute("crossorigin", "*");
        s0.parentNode.insertBefore(s1, s0);
      })();
    </script>

這是我的 index.js 組件代碼內容：-

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "bootstrap-v4-rtl/dist/js/bootstrap.js";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import BookRead from "./pages/BookRead";


ReactDOM.render(
  <React.StrictMode>
  
      <BrowserRouter>
        <Switch>
          <Route exact path="/view/:id/:section/:part" component={BookRead} />
          <Route component={App} />
        </Switch>
      </BrowserRouter>

  </React.StrictMode>,
  document.getElementById("root")
);

應用組件內容：-

import React, { useEffect, useState } from "react";
import Header from "./components/Header";
import Home from "./pages/Home";
import NewBook from "./pages/NewBook";
import { Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import Footer from "./components/Footer";
import { Helmet } from "react-helmet";

function App() {
  return (
    <div className="content">
      <Helmet>
        <title>Book Website</title>
      </Helmet>
      <Header />
      <NavBar  />
      <div className="container-fluid">
        <Route exact path="/" component={Home} />
        <Route path="/create-new" component={NewBook} />
        <Route path="/account" component={Account} />
      </div>
      <Footer />
    </div>
  );
}

export default App;

如何使聊天小部件顯示在App組件及其所有子組件中，但不顯示在BookRead組件中？

Answer 1

您可以在要顯示聊天的路由周圍創建一個包裝器。

試試這個：

function ChatEnabledRoute({ children, ...rest }) {
  return (
    <Route
      {...rest}
      render={({ location }) => (
        <MyChatComponent>
          {children}
        </MyChatComponent>
      )
      }
    />
  );
}

現在您所要做的就是創建您的 MyChatComponent，您可以在其中啟動您的聊天小部件。 在您的路由器中，只要您想要創建要在其中使用聊天小部件的路由，請使用 ChatEnabledRoute。

通過這樣做，您不必在每次瀏覽應用程序時都重新呈現整個應用程序。