我不知道如何访问UpdateHeight()；用于反应-可滑动路由

Question

仪表板加载和问题，我必须滑动和滑动回来，以更新高度。因此，我试图把它作为道具和useEffect来更新高度。我只是不明白这是怎么回事。

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Dashboard from "./components/dashboard/Dashboard";
import Notifications from "./components/dashboard/Notifications";
import Profile from "./components/profile/Profile";
import SignIn from "./components/auth/SignIn";
import SignUp from "./components/auth/SignUp";
import './App.css';
import SwipeableRoutes from "react-swipeable-routes";
import SwipeableViews from 'react-swipeable-views';

const App = (props) => {

  useEffect(() => {
    // Update the document title using the browser API
    props.swipeableViews.UpdateHeight();
  });

  return (
    <div className="App">
      <Navbar />

      <SwipeableRoutes animateHeight>
        <Route path="/signup" component={SignUp} />
        <Route path="/signin" component={SignIn} />

        <Route exact path="/" component={Dashboard} />
        <Route path="/notifications" component={Notifications} />
        <Route path="/profile" component={Profile} />
      </SwipeableRoutes>
    </div>
  );
};

export default App;

Answer 1

我的一个朋友帮了我。问题很容易解决。

// Declare ref
var updateh = React.useRef();


<SwipeableRoutes
  animateHeight={true}
  // Accroding to the doc, you should just calla hook function called "action" and assign it to the ref to be able to call the callback functions inside it.
  action={(hooks) => {
    updateh.current = hooks;
  }}
>
  <Route path="/signup" component={SignUp} />
  <Route path="/signin" component={SignIn} />
  <Route exact path="/">
    <Dashboard updateh={updateh} />
  </Route>
  <Route path="/notifications" component={Notifications} />
  <Route path="/profile" component={Profile} />
</SwipeableRoutes>