Question

我有一个上下文提供程序，该提供程序返回img refs数组。

import ReactLogo from '../../assets/logos/react.svg';

export const LogosContext = createContext<React.RefObject<HTMLImageElement>[]>([]);

const LogosProvider: React.FC = ({ children }) => {
  const ReactLogoRef = useRef<HTMLImageElement>(null);

  return (
    <div>
      <img ref={ReactLogoRef} src={ReactLogo} alt="React Logo" hidden />
      <LogosContext.Provider value={[ReactLogoRef]}
      >
        {children}
      </LogosContext.Provider>
    </div>
  );
};

export default LogosProvider;

应用

const App: React.FC = () => (
  <LogosProvider>
    <Canvas />
  </LogosProvider>
);

当我尝试使用上下文值初始化ref对象时，我可以看到每个ref.current都是null，导致LogosLoader抛出错误，因为我正在传递LogosLoader的空数组

const Canvas: React.FC = () => {
  const logosRefs = useContext(LogosContext);
  console.log(logosRefs); // [{ current: null }]
  const LogosLoader = useRef<LogoLoader>(new LogoLoader(logosRefs.map(r => r.current!)));
}

但是当我在useEffect中添加支票然后分配LogosLoader时，我可以看到logosRefs具有正确的refs而不是null console.log，然后再刺杀他们。

我得到一个console.log，所以Canvas组件没有重新渲染。

const Canvas: React.FC = () => {
  const logosRefs = useContext(LogosContext);
  console.log(logosRefs); // [{ current: img }]
  const LogosLoader = useRef<LogoLoader>();

  useEffect(() => {
    if (logosRefs.every(l => l.current)) {
      LogosLoader.current = new LogoLoader(logosRefs.map(r => r.current!));
    }
  }, [logosRefs]);
}

如果安装了LogosProvider，则不应将ref作为null传递，因为它已经渲染了，所以为什么children得到{{1}的数组} s？

我提供的背景信息不好吗？

通过上下文初始化ref是否错误？

我缺少/缺少什么理解？

无法通过上下文值初始化引用

0 个答案: