React 中带有 api 请求的单独包装器

Question

我正在使用反应。 告诉我如何制作精美（对。），在页面上：我有两个几乎相同的部分：

我正在尝试遵守规则，将容器和组件分开。 有一个包装器，其中有一个 api 请求接收特定部分的图片（以下作为道具传输），它是这样渲染的：

事实证明，这个包装器（几乎）是相同的：

我知道这可以正确完成，但有些东西不起作用。 我很困惑，必须从包装器中返回两个不同的组件，其中 api 请求接收图片。 （我一直在寻找 hoc，但我自己还没有弄清楚如何使用它）。 先感谢您。

Answer 1

我通过 hoc 做了同样的事情。 这是组件本身：

function LoadingSnapshotHOC(Component) {
  const NewComponent = (props) => {
    const isMounted = useIsMounted();
    const state = useSelector(({ dateParams }) => {
      const { currentPage } = props;
      return {
        selectedTimeLabel: dateParams?.[currentPage].selectedTimePeriod.label,
        compareTimeLabel: dateParams?.[currentPage].compareTimePeriod.label,
      };
    });

    const [snapshot, setSnapshot] = useState("");

    const updateSnapshot = async (deviceID) => {
      const img = await getSnapshot(deviceID);
      img.onload = () => {
        if (isMounted.current) {
          setSnapshot(img);
        }
      };
    };

    useEffect(() => {
      if (props.deviceID) updateSnapshot(props.deviceID);
    }, [props.deviceID]);

    return (
      <Component
        {...props}
        snapshot={snapshot}
        selectedTimeLabel={state.selectedTimeLabel}
        compareTimeLabel={state.compareTimeLabel}
      />
    );
  };
  return NewComponent;
}
export default LoadingSnapshotHOC;

接下来，我包装了我的组件：

function HeatMapSnapshot({...}) {
...
}
export default LoadingSnapshotHOC(HeatMapSnapshot);

和

function TrafficFlowSnapshot({...}) {
...
}
export default LoadingSnapshotHOC(TrafficFlowSnapshot);

和他们的渲染。 谢谢大家的关注！