Question

我有一个使用IdleTimer的HOC组件。我正在创建一个空闲超时功能，以在我的React Redux应用程序中经过一定时间后注销用户。我很难将其传递给其他路线。最好的方法是什么？

HOC（IdleTimer）

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 };
}

Answer 1

调用HOC(SegmentsContainer)时，通常是在尝试用一些新代码包装SegmentsContainer，对吗？

根据您的HOC function HOC (AutoLogoutComponent)，您的SegmentsContainer最终被命名为AutoLogoutComponent。

现在，我不是高阶组件专家，但总的来说，在您的HOC内部，您实际上希望将AutoLogoutComponent渲染到某个位置。否则，在我看来，您正在接受它作为参数，然后将其丢弃。这就是您在这里所做的事情。您不会在任何地方的渲染函数中使用该参数。

[edit]查看示例here。官方文档。他们有一个更高阶的组件function withSubscription(WrappedComponent, selectData)，并且在其render函数中渲染了WrappedComponent

将HOC组件传递到Redux中的所有其他路由

1 个答案: