1

我在我的 reactJS 项目中使用 coreUi 模板，并且当某些组件滚动时我无法平滑滚动，这意味着我可以第一次滚动大约位，然后我再次移动课程位并进行滚动以向下滚动页面..这只发生在小屏幕上（例如 1280px * 1024）

这是一个显示问题的 gif 文件：

这是我所有组件都在处理的地方：

import React, { Component, Suspense, Fragment } from "react";
import { Route, BrowserRouter as Router } from "react-router-dom";
import * as router from "react-router-dom";
import { Container } from "reactstrap";
import { logout } from "../../actions/authActions";
import { ToastContainer } from "react-toastify";

import "react-toastify/dist/ReactToastify.css";

import {
  AppHeader,
  AppSidebar,
  AppSidebarFooter,
  AppSidebarForm,
  AppSidebarHeader,
  AppSidebarMinimizer,
  AppBreadcrumb2 as AppBreadcrumb,
  AppSidebarNav2 as AppSidebarNav
} from "@coreui/react";
// sidebar nav config
import NavigationBar from "../../menu";
// routes config
import routes from "../../routes";
import { connect } from "react-redux";
import { loading } from "./LoadingComponent";
import ButtonPermission from "../../permission";

const DefaultHeader = React.lazy(() => import("./DefaultHeader"));
const Dashboard = React.lazy(() => import("./../../views/Dashboard/Dashboard"));

class DefaultLayout extends Component {
  constructor() {
    super();
    this.currentNavigation = new NavigationBar().createMenu();
    this.routes = new ButtonPermission().setPermission(routes);
  }

  signOut(e) {
    e.preventDefault();
    this.props.history.push("/login");
    this.props.LOGOUT();
  }

  render() {
    const divProps = Object.assign({}, this.props);
    delete divProps.LOGOUT;
    return (
      <div className="app scroller">
        <AppHeader fixed>
          <Suspense fallback={loading()}>
            <DefaultHeader onLogout={e => this.signOut(e)} />
          </Suspense>
        </AppHeader>
        <div className="app-body">
          <AppSidebar fixed display="lg">
            <AppSidebarHeader />
            <AppSidebarForm />
            <Suspense>
              <AppSidebarNav
                navConfig={this.currentNavigation}
                {...divProps}
                router={router}
              />
            </Suspense>
            <AppSidebarFooter />
            <AppSidebarMinimizer />
          </AppSidebar>
          <main className="main">
            <AppBreadcrumb appRoutes={this.routes} router={router} />
            <Container fluid>
              <Suspense fallback={loading()}>
                {this.routes.map((route, idx) => {
                  return route.component ? (
                    <Route
                      key={idx}
                      path={route.path}
                      exact={route.exact}
                      name={route.name}
                      render={props => (
                        <route.component {...props} {...route.props} />
                      )}
                    />
                  ) : (
                    <Fragment>
                      <Router
                        path="*"
                        name="home"
                        render={props => <Dashboard {...props} />}
                      />
                    </Fragment>

                    ////

                    ////
                  );
                })}
              </Suspense>
              <ToastContainer
                autoClose={3000}
                hideProgressBar
                closeOnClick
                pauseOnHover={false}
                position="bottom-center"
              />
            </Container>
          </main>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  error: state.error
});

const mapDispachToProps = dispach => {
  return {
    LOGOUT: () => dispach(logout())
  };
};

export default connect(mapStateToProps, mapDispachToProps)(DefaultLayout);

我可以在我的 reactJS 项目中获得更流畅的滚动吗？谢谢！

4

0 回答 0