0

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

4

1 回答 1

0

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

尝试这个：

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

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

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

于 2020-08-04T14:41:50.830 回答