需要 Base 组件的 props 在高阶组件中可用

Question

我有一个高阶组件，我用它来包装我的基本组件，如下所示：

function Map() {
  return (
    <GoogleMap
      defaultZoom={10}
      defaultCenter={{
        lat: 45.421532,
        lng: -75.697189
      }}
    >
      <Marker></Marker>
    </GoogleMap>
  );
}

下面是我的基本组件，它是这样包装的：

const WrappedMap = withScriptjs(withGoogleMap(Map));

export default function TheMap({ locationData }) {
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <WrappedMap
        googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_KEY}&v=3.exp&libraries=geometry,drawing,places`}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </div>
  );
}

我遇到的问题是我需要来自我的基本组件 (locationData) 的道具，它是从父组件传递的纬度和经度数据数组，以便在高阶组件中可用。我需要那个数组来映射来创建我的标记。我是高阶组件的新手，任何人都可以帮助我。是否有可能获得我需要的那些道具到高阶组件？

Answer 1

您只需要将数据传递给组件：

const WrappedMap = withScriptjs(withGoogleMap(Map));

export default function TheMap({ locationData }) {
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <WrappedMap
        googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_KEY}&v=3.exp&libraries=geometry,drawing,places`}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        data={locationData}
      />
    </div>
  );
}

现在您可以在 withScriptjs

渲染的组件中访问 data

需要 Base 组件的 props 在高阶组件中可用

needing props from Base component to be available in the higher order component

reactjs

higher-order-components