代码之家 › 专栏 › 技术社区 › Asaf Aviv

无法通过上下文值初始化ref

typescript reactjs javascript

Asaf Aviv · 技术社区 · 5 年前

我有一个上下文提供程序,它返回一个img引用数组。

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 因为我将空数组传递给 徽标阅读器

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 然后分配 徽标阅读器 我看得出 logosRefs refs 而不是 无效的 s穿过 console.log

我有一个 控制台.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 坐骑它不应该通过 裁判 作为因为它已经呈现了为什么 children 获取一个数组 无效的 s?

通过上下文初始化ref是错误的吗?

我错过了什么?