Реагировать: преобразовать константу HOC в компонент

Я использую React Google Maps, чтобы добавить Google Maps на свою страницу, и я устанавливаю карту сюда:

import React from "react";
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";

export const MapWithMarkers = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={17}
    center={{ lat: parseFloat(props.lat), lng: parseFloat(props.long) }}
  >
    {props.markers.map(marker => (
        <Marker
          key={marker.todoId}
          position={{ lat: parseFloat(marker.lat), lng: parseFloat(marker.long) }}
        />
    ))}
  </GoogleMap>
))

Однако я хотел бы внедрить хранилище и использовать this.props.store.lat, а не props.lat, используя @inject('store'), что требует превращения MapWithMarkers в класс вместо const.

Я пробовал следующее:

import React from "react";
import { observer, inject } from 'mobx-react';
import PropTypes from 'prop-types';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";

@inject('store') @observer
export class MapWithMarkers extends React.Component {
  static propTypes = {
    store: PropTypes.object.isRequired,
  }

  constructor(props) {
    super(props);
  }

  renderMarkers = (props) => {
    <GoogleMap
      defaultZoom={17}
      center={{ lat: parseFloat(this.props.store.lat), lng: parseFloat(this.props.store.long) }}
    >
      {this.props.store.todos.map(marker => (
        <Marker
          key={marker.todoId}
          position={{ lat: parseFloat(marker.lat), lng: parseFloat(marker.long) }}
        />
      ))}
    </GoogleMap>
  }

  render() {
    const props = this.props;
    return withScriptjs(withGoogleMap(this.renderMarkers()));
  }

}

Это не работает, возвращая:

Неперехваченная (в обещании) Ошибка: MapWithMarkers.render(): должен быть возвращен допустимый элемент React (или null). Возможно, вы вернули undefined, массив или другой недопустимый объект.

Что я делаю не так?


reactjs javascript mobx mobx-react react-google-maps
person Community    schedule 29.01.2018    source источник
comment
попробуй так: render() { const props = this.props; const MapUI = withScriptjs(withGoogleMap(this.renderMarkers(props))); return <MapUI /> }   -  person Mayank Shukla    schedule 29.01.2018
comment
Это возвращается: Warning: Failed prop type: The prop `loadingElement` is marked as required in `withScriptjs(withGoogleMap(undefined))`, but its value is `undefined`. in withScriptjs(withGoogleMap(undefined)) (at Map.js:33) Warning: Failed prop type: The prop `googleMapURL` is marked as required in `withScriptjs(withGoogleMap(undefined))`, but its value is `undefined`. Uncaught (in promise) Error: Required props loadingElement or googleMapURL is missing. You need to provide both of them.   -  person    schedule 29.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

withScriptjs и withGoogleMap являются HOC, вы должны передать HOC компонент. Таким образом, ваш компонент должен выглядеть примерно так:

import React from "react";
import { observer, inject } from 'mobx-react';
import PropTypes from 'prop-types';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";

@inject('store') @observer
export class Map extends React.Component {
  static propTypes = {
    store: PropTypes.object.isRequired,
  }

  render() {
    return <GoogleMap
      defaultZoom={17}
      center={{ lat: parseFloat(this.props.store.lat), lng: parseFloat(this.props.store.long) }}
    >
      {this.props.store.todos.map(marker => (
        <Marker
          key={marker.todoId}
          position={{ lat: parseFloat(marker.lat), lng: parseFloat(marker.long) }}
        />
      ))}
    </GoogleMap>
  }

}

export const MapWithMarkers = withScriptjs(withGoogleMap(Map))
person CD..    schedule 29.01.2018
comment
Я внес предложенные вами изменения, но получаю ту же ошибку :-/ - person ; 29.01.2018
comment
Это работает! Большое спасибо, потратил целый день, пытаясь понять это :D - person ; 29.01.2018