Reactjs 为除一个之外的所有组件添加 javascript 代码答案

【问题标题】：Reactjs adding javascript code for all components except for oneReactjs 为除一个之外的所有组件添加 javascript 代码
【发布时间】：2020-08-04 14:18:49
【问题描述】：

我从 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 组件中？

【问题讨论】：

标签： javascript reactjs tawk.to

【解决方案1】：

您可以在要显示聊天的路由周围创建一个包装器。

试试这个：

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

现在您所要做的就是创建您的 MyChatComponent，您可以在其中启动您的聊天小部件。在您的路由器中，只要您想创建要在其中使用聊天小部件的路由，请使用 ChatEnabledRoute。

这样做，您不必在每次浏览应用时都重新渲染整个应用。

【讨论】：