能否将回调Ref存入Context，在其他组件调用以实现滚动定位？

可以通过Context存储元素Ref来实现侧边栏触发滚动到目标元素的需求，但你的现有代码存在几个关键问题需要修正，以下是具体说明和优化方案：

现有代码的问题 #

1. createRef使用错误：createRef是用于单个元素的Ref创建，且每次组件渲染都会生成新的Ref实例；管理多个Ref应该用useRef，它能在组件生命周期内保持引用稳定，适合作为存储多个Ref的容器。
2. Context取值逻辑错误：Provider传入的是elementRefs本身，但你在列表组件中尝试解构{ elementRefs }，这会导致取值为undefined。
3. 冗余的键值存储：如果message_id是唯一标识，不需要额外用index作为二级键，直接用message_id作为键存储Ref即可。
4. 未处理Ref清理：当列表元素卸载（比如删除消息、列表重新渲染）时，旧的Ref会留在对象中，可能造成内存泄漏。

修正后的代码实现 #

1. 重构Context部分 #

import { createContext, useRef, useContext } from "react";

const ElementRefsContext = createContext();

export const ElementRefsProvider = ({ children }) => {
  // 用useRef创建稳定的Ref存储容器，初始为空对象
  const elementRefs = useRef({});
  return (
    <ElementRefsContext.Provider value={elementRefs}>
      {children}
    </ElementRefsContext.Provider>
  );
};

export const useElementRefsContext = () => {
  return useContext(ElementRefsContext);
};

2. 列表组件优化 #

function LongListOfBigElements() {
  const elementRefs = useElementRefsContext();

  return (
    <>
      {messages?.map((message) => {
        const messageId = message.message_id;
        return (
          <BigElement
            key={messageId} // 使用唯一ID作为key，避免不必要的组件重渲染
            ref={(el) => {
              if (el) {
                // 元素挂载时，将Ref存入容器
                elementRefs.current[messageId] = el;
              } else {
                // 元素卸载时，删除对应的Ref，清理内存
                delete elementRefs.current[messageId];
              }
            }}
          />
        );
      })}
    </>
  );
}

3. 侧边栏触发滚动的实现 #

function SidebarNotification({ targetMessageId }) {
  const elementRefs = useElementRefsContext();

  const scrollToTarget = () => {
    const targetEl = elementRefs.current[targetMessageId];
    if (targetEl) {
      // 调用scrollIntoView实现平滑滚动，可配置滚动行为
      targetEl.scrollIntoView({
        behavior: "smooth",
        block: "start" // 滚动到元素顶部位置
      });
    }
  };

  return (
    <button onClick={scrollToTarget}>
      跳转到消息 {targetMessageId}
    </button>
  );
}

额外注意事项 #

• 如果你的长列表使用了虚拟滚动组件（如react-window、react-virtualized），直接存储Ref的方式可能失效，因为虚拟列表只会渲染可见区域的元素，此时需要结合虚拟列表的API（如scrollToIndex）来实现定位。
• 确保message_id是全局唯一的，避免不同消息的Ref被意外覆盖。

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