Reactjs добавление javascript кода для всех компонентов кроме одного - PullRequest
Новая
       40

Reactjs добавление javascript кода для всех компонентов кроме одного

0 голосов
/ 04 августа 2020

Я получил следующий код виджета чата от 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>

И это мой индекс. 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?

1 Ответ

0 голосов
/ 04 августа 2020

Вы можете создать оболочку вокруг маршрутов, где вы хотите отображать чат.

Попробуйте следующее: 

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

Теперь все, что вам нужно сделать, это создать свой MyChatComponent, в котором вы можете запустить свой виджет чата. В своем маршрутизаторе используйте ChatEnabledRoute всякий раз, когда вы хотите создать маршрут, в котором вы хотите использовать свой виджет чата.

Таким образом вам не придется повторно отображать все свое приложение каждый раз при навигации по ваше приложение.

...