时间戳

首页 > 解决方案 > React 在组件之间共享数据而无需重新加载组件

javascript - React 在组件之间共享数据而无需重新加载组件

问题描述

我有一个地图组件，用户将在其中选择图像和侧面的另一个组件以使用选择中的数据。但是，当我在地图组件上设置上下文时，它会重新加载并重置地图。- 我将如何阻止此组件重新加载，或使用一种方法来共享此数据而不触发重新加载？

示例使用缩放按钮/鼠标滚轮查看重置问题。

我认为这样做的方法是使用上下文组件，并将函数作为值传递给提供程序

import React, { useState, createContext } from "react";
export const ImageContext = createContext(); 
export const ImageProvider = (props) => {
    const [images, setImages] = useState([]);
    return <ImageContext.Provider value={[images,setImages]} >
    {props.children}
    </ImageContext.Provider>;
 };

将我的应用程序包装在contextprovider（组件是兄弟姐妹，而不是子父关系）

return (
<div id="App">
        <ImageProvider>
             ...
             <SidePanel />
              <WebMapView />
             ...
          </ImageProvider>
    </div>
  );
}

我导入到我mapcomponent的上下文中，Usecontext如下所示

import { ImageContext } from "./ImageContext";
const [images, setImages] = useContext(ImageContext);

然后在用户输入地图时设置如下上下文

export const WebMapView = () => {
...
    setImages(results.features);
...
}

问题描述：

  1. 我需要在地图上获取选择数据并将其传递给sidecomponent每次用户在不重新加载地图的情况下进行输入时，但在sidepanel状态下新数据可用时保持反应重新加载的正常功能
  2. 我需要将信息从地图传递sidepanel到mapcomponent地图中的处理，但无需重新加载地图。

我开始觉得印象上下文不是正确的工具，我应该使用其他东西吗？我已经研究了 shouldComponentUpdate 和purecomponents，但文档指出它们是更多的“建议”并且不能保证防止重新加载......

标签： javascriptreactjs

解决方案

推荐阅读