javascript - 使用 Suspense 创建组件时如何使 useRef 不为空

Question

我有点卡在如何实现这个问题上。

我正在渲染 map ，我需要 useRef 在创建 map 时将元素传递给 map 。

首先要做的是需要下载源文件，然后 mapkit 类就可以使用了。我用悬念来解决这个问题:

<Suspense fallback={<MapFallback />}>
  <InternalMap {...props}></InternalMap>
</Suspense>

真正好的地方是 InternalMap 在 mapkit 未准备好时抛出一个 promise ，因此显示回退，并且在 InternalMap 中我可以假设定义了 mapkit。然后在 InternalMap 里面我有:

const mapDivRef = useRef<HTMLDivElement>(null);

// This does not work because mapDivref.current is null, unless I decide to
//  put it inside of a useEffeect, at which point I have to verify it's created.
const map = new mapkit.Map(mapDivRef.current, options);


return (
  <div ref={mapRef} style={{ width: '100%', height: '100%' }}>
    {children}       
  </div>
);

这里的问题是我需要使用 useEffect 来创建我的 map ，因为 mapDivRef 在渲染发生之前为 null。有什么方法可以在渲染或抛出错误之前定义 mapDivRef.current 以便发生悬念回退？我要解决的问题是我的代码的 1/5 是 if (!map) return ...。我认为悬念会对此有所帮助，就像它对 mapkit 的初始加载一样。我知道 mapkit 现在定义了我的组件是否被渲染。我正在尝试对 map 做同样的事情。

Answer 1

首先，我们不应该直接在功能组件中创建任何实例，因为它会在每次重新渲染时创建。

Refs 在初始渲染后被分配一个值。您使用 useEffect 创建 map 实例的方法是正确的。

要正确使用 map 实例，请执行以下操作:

• 保持状态说 map
• 在useEffect中创建 map 实例并保存在map状态
• 将 map 实例作为 render prop 传递，然后渲染一个子组件，该子组件可以包含您的所有逻辑 if (!map) return ... 等

内部 map 组件

const InternalMap = props => {
  const [map, setMap] = useState(null);

  const myRef = useRef(null);
  console.log(myRef.current);

  useEffect(() => {
    const myMap = new mapkit.Map(mapDivRef.current, options);
    setMap(myMap);
  }, []);

  return <div ref={mapRef} style={{ width: '100%', height: '100%' }}>
    {props.children(map)}
  </div>;
};

用法:

<Suspense fallback={<MapFallback />}>
  <InternalMap>
    {map => <ChildComponent {...props} map={map} />}  
  </InternalMap>
</Suspense>