нужны реквизиты из базового компонента, которые будут доступны в компоненте высшего порядка - PullRequest
Новая
       24

нужны реквизиты из базового компонента, которые будут доступны в компоненте высшего порядка

0 голосов
/ 03 марта 2020

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

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

1 Ответ

1 голос
/ 03 марта 2020

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

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

...