требуются реквизиты из базового компонента, чтобы быть доступными в компоненте более высокого порядка

У меня есть компонент более высокого порядка, который я использую для обертывания базового компонента следующим образом:

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), который представляет собой массив данных широты и долготы, переданных из родительского компонента, которые будут доступны в компоненте более высокого порядка. Мне нужно, чтобы этот массив отображался для создания моих маркеров. Я новичок в компонентах более высокого порядка, кто-нибудь может мне помочь. возможно ли получить те реквизиты, которые мне нужны, для компонента более высокого порядка?


reactjs higher-order-components
person Jesse James    schedule 03.03.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам просто нужно передать данные компоненту:

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>
  );
}

Теперь вы можете получить доступ к data в компоненте, визуализируемом withScriptjs

person Johnny Zabala    schedule 03.03.2020
comment
спасибо, чувак, я думал, что сказал это, но не видел своего комментария, я ценю это - person Jesse James; 06.03.2020