react-swipeable-routes中UpdateHeight()方法调用失败及高度更新异常的技术咨询

看起来你遇到的核心问题是：当Dashboard组件加载完成后，react-swipeable-routes的高度没有自动更新，必须切换路由再返回才能触发高度调整。你尝试通过props传递实例调用UpdateHeight()但没成功，主要原因是没有正确获取到SwipeableRoutes的组件实例，而且你的App组件根本没有接收swipeableViews这个props，所以调用props.swipeableViews.UpdateHeight()自然无效。

下面给你几个可行的解决方案：

方案一：使用Ref获取SwipeableRoutes实例，监听路由变化更新高度 #

通过useRef获取SwipeableRoutes的组件实例，然后在路由切换到Dashboard时（包括初始加载）调用UpdateHeight()方法：

import React, { useState, useEffect, useRef } 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";

const App = () => {
  // 创建ref来引用SwipeableRoutes组件
  const swipeableRoutesRef = useRef(null);

  useEffect(() => {
    // 定义更新高度的函数
    const updateRouteHeight = () => {
      // 确保ref已经挂载到组件上
      if (swipeableRoutesRef.current) {
        // 调用组件的UpdateHeight方法
        swipeableRoutesRef.current.UpdateHeight();
      }
    };

    // 初始加载Dashboard时调用一次，加小延迟确保内容渲染完成
    if (window.location.pathname === "/") {
      setTimeout(updateRouteHeight, 100);
    }

    // 监听路由变化，切换回Dashboard时更新高度
    const handleRouteChange = () => {
      if (window.location.pathname === "/") {
        updateRouteHeight();
      }
    };
    window.addEventListener("popstate", handleRouteChange);

    // 清理监听事件
    return () => {
      window.removeEventListener("popstate", handleRouteChange);
    };
  }, []);

  return (
    <div className="App">
      <Navbar />
      {/* 给SwipeableRoutes绑定ref */}
      <SwipeableRoutes ref={swipeableRoutesRef} 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;

方案二：在Dashboard组件内部触发高度更新（更精准） #

如果Dashboard的高度变化是因为异步数据加载或动态内容（比如图片），可以在Dashboard内容完全渲染后，主动通知App组件更新高度：

第一步：修改App组件，传递更新函数给Dashboard #

// App.jsx中修改Dashboard的路由渲染方式
<Route 
  exact path="/" 
  render={(props) => <Dashboard {...props} updateSwipeHeight={() => {
    if (swipeableRoutesRef.current) {
      swipeableRoutesRef.current.UpdateHeight();
    }
  }} />} 
/>

第二步：在Dashboard组件中调用更新函数 #

// Dashboard.jsx
import React, { useEffect } from "react";

const Dashboard = ({ updateSwipeHeight }) => {
  // 假设你有异步数据加载逻辑
  useEffect(() => {
    const fetchDashboardData = async () => {
      // 模拟API请求
      await new Promise(resolve => setTimeout(resolve, 1000));
      // 数据加载完成，内容渲染后更新高度
      updateSwipeHeight();
    };

    fetchDashboardData();

    // 如果没有异步数据，只是组件挂载完成后更新，直接调用
    // updateSwipeHeight();

    // 如果有图片等资源，还可以监听图片加载完成事件再更新
    // document.querySelectorAll('img').forEach(img => {
    //   img.onload = updateSwipeHeight;
    // });
  }, [updateSwipeHeight]);

  return (
    // 你的Dashboard内容
    <div className="dashboard">
      {/* 动态内容/异步加载的内容 */}
    </div>
  );
};

export default Dashboard;

关键问题解释 #

1. 为什么原来的方法无效？：你的App组件没有接收swipeableViews这个props，这个属性是你自己假设的，但实际上并没有被传入。要获取组件实例，必须通过ref来引用。
2. 为什么需要切换路由才生效？：因为切换路由时，react-swipeable-routes会重新计算高度，而初始加载时它可能在Dashboard内容渲染前就计算了高度，导致高度不正确。

内容的提问来源于stack exchange，提问作者Fares Saleh