javascript - 如何为整个应用程序创建包装器组件？

Question

我正在尝试为我的 React 应用程序添加一些分析跟踪。基本上只是使用组件添加全局事件监听器，然后在该组件中适本地处理事件。

我想将我的整个应用程序包装在这个组件中并让它接收 componentWillUpdate prop 更改，以便我可以使用 prop.location 对页面更改使用react.我的问题是我不知道如何设置我的包装器组件来执行此操作。我知道 HOC 的概念可以帮助包装一个组件，我已经测试过它可以工作，但我希望它成为一个更通用和全局的组件。

Tracker.js

import PropTypes from "prop-types"
import * as React from "react"
import { connect } from "react-redux"

import TrackingManager from './TrackingManager'
import ScriptManager from "./ScriptManager"
import { isLeftClickEvent } from "../utils/Utils"

const trackingManager = new TrackingManager()

const config = {
    useTagManager: true,
    tagManagerAccount: 'testCccount', 
    tagManagerProfile: 'testProfile', 
    tagManagerEnvironment: 'dev'
}

/**
 * compares the locations of 2 components, mostly taken from:
 * http://github.com/nfl/react-metrics/blob/master/src/react/locationEquals.js
 *
 * @param a
 * @param b
 * @returns {boolean}
 */
function locationEquals(a, b) {
  if (!a && !b) {
    return true;
  }
  if ((a && !b) || (!a && b)) {
    return false;
  }

  return (
    a.pathname === b.pathname && a.search === b.search && a.state === b.state
  );
}

/**
 * Tracking container which wraps the supplied Application component.
 * @param Application
 * @param beforeAction
 * @param overrides
 * @returns {object}
 */
const track = Application =>
  class TrackingContainer extends React.Component {
    constructor(props) {
      super(props)
    }

    componentDidMount() {
      this._addClickListener()
      this._addSubmitListener()
    }

    componentWillUnmount() {
      // prevent side effects by removing listeners upon unmount
      this._removeClickListener()
      this._removeSubmitListener()
    }

    componentDidUpdate(prevProps) {
      // if and only if the location has changed we need to track a
      // new pageview
      if (!locationEquals(this.props.location, prevProps.location)) {
        this._handlePageView(this.props)
      }
    }


    _addClickListener = () => {
      // bind to body to catch clicks in portaled elements (modals, tooltips, dropdowns)
      document.body.addEventListener("click", this._handleClick)
    }

    _removeClickListener = () => {
      document.body.removeEventListener("click", this._handleClick)
    }

    _addSubmitListener = () => {
      document.body.addEventListener("submit", this._handleSubmit)
    }

    _removeSubmitListener = () => {
      document.body.removeEventListener("submit", this._handleSubmit)
    }

    _handleSubmit = event => {
        console.log(event.target.name)
    }

    _handleClick = event => {
      // ensure the mouse click is an event we're interested in processing,
      // we have discussed limiting to external links which go outside the
      // react application and forcing implementers to use redux actions for
      // interal links, however the app is not implemented like that in
      // places, eg: Used Search List. so we're not enforcing that restriction
      if (!isLeftClickEvent(event)) {
        return
      }

      // Track only events when triggered from a element that has 
      // the `analytics` data attribute.
      if (event.target.dataset.analytics !== undefined) {
        trackingManager.event('pageName', 'User')
      }
    }

    _handlePageView = route => {
      console.log('CHANGE PAGE EVENT')
      console.log(route)
    }

    /**
     * Return  tracking script. 
     */
    _renderTrackingScript() {

        /**
         * If utag is already loaded on the page we don't  want to load it again
         */
        if (window.utag !== undefined) return

        if (config.useTagManager === false) return

        /**
         * Load  utag script. 
         */
        return (
          <ScriptManager
            account={config.tagManagerAccount}
            profile={config.tagManagerProfile}
            environment={config.tagManagerEnvironment}
          />
        )
    }


    render() {
      return (
        <React.Fragment>
          <Application {...this.props} {...this.state} />
          {this.props.children}
          {this._renderTrackingScript()}
        </React.Fragment>
      )
    }
  }

export default track

我想用我的 index.js 做类似的事情:

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Switch, Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './lib/store'
import history from './lib/history'
import Loadable from 'react-loadable'
import PageLoader from './components/PageLoader/PageLoader'
import { 
    DEFAULT_PATH, 
    LOGIN_PATH, 
    LOGOUT_PATH, 
    USER_PATH,
} from './lib/paths'

const Login = Loadable({ loader: () => import('./scenes/Auth/Login' /* webpackChunkName: 'login' */), loading: PageLoader })
const Logout = Loadable({ loader: () => import('./scenes/Auth/Logout'/* webpackChunkName: 'logout' */), loading: PageLoader })
const User = Loadable({ loader: () => import('./scenes/Auth/User'/* webpackChunkName: 'user' */), loading: PageLoader })


import Track from './lib/tracking/Tracker'

import './assets/stylesheets/bootstrap.scss'
import './bootstrap-ds.css'
import './index.css'
import './assets/stylesheets/scenes.scss'

ReactDOM.render((
// This is an example of what I want to accomplish
<Track>
    <Provider store={store}>
        <Router history={history}>
            <Switch>
                <Route path={LOGIN_PATH} component={Login}  />
                <Route path={LOGOUT_PATH} component={Logout} />
                <Route path={USER_PATH} component={User} />
            </Switch>
        </Router>
    </Provider>
</Track>
), document.getElementById('root'))

所以，基本上 <Track> 在哪里组件可以包装整个应用程序并仍然使用 Prop 并检查它们是否更新。有没有办法做到这一点？我需要更改什么？

Answer 1

Context API似乎是您的用例。您需要一种解耦的方式来在同一棵树中的组件之间共享数据。您的包装器可以实现一个 Provider，所有对共享值感兴趣的组件都将实现一个 Consumer。 HOC 和 render Props 可用于共享有状态逻辑，而不是状态本身。

const { Provider, Consumer } = React.createContext()

const Wrapper = ({children}) =>{
    return(
        <Provider value={mySharedValue}>
            {children}
        </Provider>
    )
}

const NestedChildren = () =>{
    return(
        <Consumer>
            {context => <div>{context}</div>}
        </Consumer>
    )
}

const App = () =>{
    return(
        <Wrapper>
            <Child> <NestedChild /> </Child>
        </Wrapper>
    )
}