React中如何基于URL参数从父组件滚动到指定子组件？

原代码存在的问题 #

1. 使用createRef而非useRef：createRef每次组件渲染都会生成新的引用实例，无法持久化跟踪目标元素
2. 依赖自定义isEmptyArray判断数组状态，存在不确定性，不如直接用wines.length > 0直观可靠
3. 滚动触发时机可能早于子组件挂载完成，导致ref.current为null
4. 未处理wineId匹配失败的场景，也没有避免重复滚动的逻辑

修复方案一：优化Ref实现方式 #

父组件代码

const ParentView = () => {
  const [wines, setWines] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [scrolled, setScrolled] = React.useState(false); // 标记是否已完成滚动，避免重复触发

  const params = new URLSearchParams(document.location.search);
  const isMx = params.get('lang') ? false : true;
  const wineId = params.get('wine')?.toLowerCase(); // 统一转小写，消除大小写匹配问题

  const targetRef = React.useRef(null); // 改用useRef持久化引用

  const scrollToTarget = () => {
    if (targetRef.current) {
      targetRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
      setScrolled(true);
    }
  };

  React.useEffect(() => {
    retrieveData();
  }, []);

  React.useEffect(() => {
    // 满足条件：数据加载完成、非加载状态、存在目标ID、未滚动过
    if (wines.length > 0 && !loading && wineId && !scrolled) {
      // 延迟执行确保DOM渲染完成
      setTimeout(scrollToTarget, 0);
    }
  }, [wineId, wines, loading, scrolled]);

  function renderWines() {
    if (loading) return <Loading />;

    const filteredWines = wines.filter(p => p.status === 'published');
    if (filteredWines.length === 0) return <h2>No items found</h2>;

    return (
      <>
        {filteredWines.map((w, idx) => (
          <ChildComponent
            key={idx}
            wine={w}
            isMx={isMx}
            idx={idx}
            openModal={openModal}
            ref={wineId === w.name.toLowerCase() ? targetRef : null}
          />
        ))}
      </>
    );
  }

  return <>{renderWines()}</>;
};

子组件代码（保持forwardRef正确传递）

import React, { forwardRef } from 'react';
import { Row } from 'reactstrap';

const WineRow = forwardRef(({ wine, isMx, idx, openModal }, ref) => {
  const { name } = wine;

  return (
    <Row id={name.toLowerCase()} ref={ref}>
      ...content that is irrelevant for this example
    </Row>
  );
});

export default WineRow;

修复方案二：利用DOM ID直接滚动（更简洁） #

无需使用Ref，直接通过子组件的ID定位元素：

父组件核心修改

const scrollToTarget = () => {
  const targetElement = document.getElementById(wineId);
  if (targetElement) {
    targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    setScrolled(true);
  }
};

// 子组件无需传递ref，确保ID与参数匹配
// renderWines中的子组件改为：
<ChildComponent
  key={idx}
  wine={w}
  isMx={isMx}
  idx={idx}
  openModal={openModal}
/>

子组件修改

const WineRow = ({ wine, isMx, idx, openModal }) => {
  const { name } = wine;

  return (
    <Row id={name.toLowerCase()}>
      ...content that is irrelevant for this example
    </Row>
  );
};

注意事项 #

• 确保URL中wine参数与子组件name转小写后完全匹配，避免因大小写或拼写差异导致匹配失败
• 若reactstrap的Row组件是复杂封装组件，需确认其支持ref转发；若不支持，可直接给Row内部的根DOM元素添加ref
• 使用setTimeout是为了确保DOM渲染完成后再执行滚动，避免元素未挂载导致的无效调用

内容的提问来源于stack exchange，提问作者Israel Santiago