javascript - 将 HOC 组件传递给 redux 中的所有其他路由

Question

我有一个使用 IdleTimer 的 HOC 组件。我正在创建一个空闲超时功能，以便在我的反应、redux 应用程序中的特定时间后注销用户。我很难将其传递给我的其他路线。解决这个问题的最佳方法是什么？

HOC（空闲定时器）

import IdleTimer from "react-idle-timer";
import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { Switch, Route } from 'react-router-dom'

export default function HOC (AutoLogoutComponent) {
 return class extends Component{
      idleTimer;

      constructor(props) {
          super(props);

          this.state = {
              timeout:      1000*5,
              showModal:    false,
              userLoggedIn: false,
              isTimedOut:   false
          };

          this.idleTimer = null;
          this.onAction = this._onAction.bind(this);
          this.onActive = this._onActive.bind(this);
          this.onIdle = this._onIdle.bind(this);

      }

      _onAction(e){
          console.log('User did something', e);
          this.setState({isTimedOut: false})
      }

      _onActive(e){
          console.log('user is active', e);
          this.setState({isTimedOut: false})
      }

      _onIdle(e){
          console.log('user is idle', e);
          const isTimedOut = this.state.isTimedOut;
          if (isTimedOut){
              this.props.history.push('/')
          }else {
              this.setState({showModal: true});
              this.idleTimer.reset();
              this.setState({isTimedOut: true})
          }
      }

    render() {
        const { match } = this.props;
        return (
            <div>
                <IdleTimer
                    ref={ref => {this.idleTimer = ref}}
                    element={document}
                    onActive={this.onActive}
                    onIdle={this.onIdle}
                    onAction={this.onAction}
                    debounce={250}
                    timeout={this.state.timeout} />

                    <div className="">
                        <Switch>
                            <Route
                               exact path={`${match.path}/sales-analysis/dashboard`}
                                render={(props) => <DefaultLayout {...props} /> }/>
                            />
                        </Switch>
                    </div>
            </div>
        )
    }

 }
}
    HOC.propTypes = {
        match: PropTypes.any.isRequired,
        history: PropTypes.func.isRequired
    };

我的路线所在的 Index.js 文件。

 render() {
    return (
      <Provider store={this.props.store}>
        <PersistGate loading={<div />} persistor={this.props.persistor}>
          <BrowserRouter>
            <div id="browserRouter">
              <Route exact path="/" component={LoginContainer} key="login" />
              <Route
                path="/change-password"
                component={LoginContainer}
                key="change-password"
              />
              <Route path="/logout" component={Logout} key="logout" />
              <DefaultLayout
                path="/sales-analysis/dashboard"
                component={HOC(DashboardContainer)}
              />
              <DefaultLayout
                path="/sales-analysissbfhghgb"
                component={HOC(ActiveClientsContainer)}
              />
              <DefaultLayout
                path="/sales-analysis/sbs5dygkjgkh"
                component={HOC(ActivityReportsContainer)}
              />
              <DefaultLayout
                path="/sales-analysis/bbebshyfyfu"
                component={HOC(SegmentsContainer)}
              />
              <DefaultLayout path="/adfserv" component={ProspectsContainer} />
              <DefaultLayout
                path="/preferences/general"
                component={HOC(PreferenceGeneral)}
              />
              <DefaultLayout
                path="/preferences/sdfgsverv"
                component={HOC(PreferenceAccountManager)}
              />
              <DefaultLayout
                path="/preferences/sdvs3esdfvsd"
                component={HOC(PreferenceFlexFields)}
              />
              <DefaultLayout
                path="/preferences/osbrddfsf"
                component={HOC(PreferenceOEMManager)}
              />
              <DefaultLayout
                path="/preferences/users"
                component={HOC(PreferenceUsers)}
              />
              <DefaultLayout
                path="/preferences/group-users"
                component={HOC(PreferenceGroupUsers)}
              />
            </div>
          </BrowserRouter>
        </PersistGate>
      </Provider>
    );
  }
}
AppEntry = HOC(AppEntry);

店铺

function configureStore() {
  let store = createStore(
    reducer,
    composeEnhancers(
      applyMiddleware(
        //onSuccessMiddleware, may not need this...
        axiosMiddleware(API, apiOptions),
        thunk,
        notificationMiddleware
      )
    )
  );
  let persistor = persistStore(store);

  return { persistor, store };
}

标签： javascriptreactjsreduxreact-reduxsession-timeout

Answer 1

当你打电话时HOC(SegmentsContainer)，你通常会尝试SegmentsContainer用一些新代码来包装你的，对吧？

在你的 HOC 的上下文中function HOC (AutoLogoutComponent)，你SegmentsContainer最终被命名为AutoLogoutComponent。

现在，我不是高阶组件方面的专家，但一般来说，在您的 HOC 内部，您希望实际渲染您的AutoLogoutComponent某个地方。否则，在我看来，您将其作为论据接受，然后将其丢弃。这就是你在这里所做的事情。您没有在任何地方的渲染函数中使用该参数。

[编辑] 看看这里的例子。官方文档。他们有一个更高阶的组件function withSubscription(WrappedComponent, selectData)，并且他们WrappedComponent在他们的渲染函数中渲染