点击谷歌地图元素无法滚动到React列表对应项

核心问题分析 #

1. Ref绑定逻辑错误：当前List.jsx用useState维护ref数组，复用旧ref的方式会导致ref无法正确关联最新DOM元素，还因缺少依赖项引发警告。
2. 滚动触发时机错误：PlaceDetails.jsx直接在组件内判断selected执行滚动，此时DOM元素可能未完成挂载，导致refProp.current为null，滚动失效。

代码修复步骤 #

1. 重构List.jsx中的Ref管理 #

改用useRef维护ref数组，避免状态更新带来的不必要重渲染，同时解决依赖警告：

// List.jsx
import { useRef, useEffect } from 'react';

const elRefs = useRef([]);

useEffect(() => {
  // 当places长度变化时重置ref数组
  elRefs.current = Array(places?.length).fill().map((_, i) => elRefs.current[i] || createRef());
}, [places]);

修改Grid元素的ref传递（需确保PlaceDetails正确接收并绑定ref）：

<Grid item key={i} xs={12}>
  <PlaceDetails 
    place={place}
    selected={Number(childClicked) === i} 
    ref={elRefs.current[i]}
  />
</Grid>

2. 修正PlaceDetails.jsx的滚动触发逻辑 #

用forwardRef接收父组件ref，再通过useEffect监听selected变化，确保DOM挂载后执行滚动：

// PlaceDetails.jsx
import { useEffect, forwardRef } from 'react';

const PlaceDetails = forwardRef(({ place, selected }, ref) => {
  useEffect(() => {
    if (selected && ref.current) {
      ref.current.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  }, [selected, ref]);

  return (
    <div ref={ref}>
      {/* 卡片内容 */}
    </div>
  );
});

export default PlaceDetails;

3. 解决两个警告 #

• 警告1：React Hook useEffect has a missing dependency: 'elRefs'
  改用useRef维护ref数组后，useEffect依赖数组只需保留places，无需elRefs，警告自动消失。
• 警告2：Received false for a non-boolean attribute $hover
  检查PlaceDetails内的UI组件，是否错误传递了$hover=false这类属性。非布尔属性不能接收false值，若不需要直接删除该属性；若需布尔状态，改为传递hover={false}（去掉$前缀，匹配组件属性要求）。

额外验证点 #

确认App.js中childClicked状态在地图元素点击时，能正确更新为对应列表项的索引，这是触发滚动的前提。

内容的提问来源于stack exchange，提问作者Immortal Phoenix