React：将 HOC const 转换为组件

Question

我正在使用 React Google Maps 将 Google 地图添加到我的页面，我正在此处设置地图：

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 变成 class 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()));
  }

}

这不起作用，返回：

Uncaught (in promise) Error: MapWithMarkers.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

我做错了什么？

Answer 1

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

React：将 HOC const 转换为组件

React: Convert HOC const to component

javascript

reactjs

mobx

mobx-react

react-google-maps