高階組成部分：默認道具

Question

我有此代碼，並嘗試用react類包裝HOC。 首先，我要覆蓋默認參數的一部分。 所以這是我的代碼（ 您不需要閱讀整個代碼 ，這個問題只是關於HOC中的defaultProps的問題）

首先是組件：

import React from 'react';
// recompose
import compose from 'recompose/compose';
import defaultProps from 'recompose/defaultProps';
import withState from 'recompose/withState';
import withHandlers from 'recompose/withHandlers';
import withProps from 'recompose/withProps';
// utils
import { themr } from 'react-css-themr';
import { suslovkaCoords, generateMarkers } from './utils/fakeData';
// controls
import CanvasHoverMap from './controls/Map';
import HoveredTooltipMarker from './controls/Markers/HoveredTooltipMarker';
import TooltipMarker from './controls/Markers/TooltipMarker';
// components
import RoomTooltip from '../RoomTooltip/RoomTooltip';
// styles
import styles from './map.sass';
import mapStyles from './controls/Map/mapSytles';

const MARKERS_COUNT = 3000;

export const map = ({
  theme,
  style,
  options,
  markerHoverDistance,
  markers,
  renderMarkers,
  renderMarker,
  mapParams: {
    zoom,
    center,
  },
  setMapParams,
  onMapParamsChange,
  selectedMarker,
  setSelectedMarker,
  isMobile,
  refresh,
}) => (
  <div className={theme.component}>
    <CanvasHoverMap
      // flex: 1 here
      style={style}
      // google map options https://developers.google.com/maps/documentation/javascript/controls#ControlOptions
      options={options}
      // see CanvasMap onMouseMove, distance at which algorithm decides that marker is hovered
      markerHoverDistance={markerHoverDistance}
      // google-map-react props
      center={center}
      zoom={zoom}
      onChange={onMapParamsChange}
      // canvas markers, and render functions
      markers={markers}
      // render markers at canvas
      renderMarkers={renderMarkers}
      // render hovered marker as is
      renderMarker={renderMarker}
      // to force redraw just pass a new empty object to refresh for example
      refresh={refresh}
      // selected marker always visible over canvas (+ tooltip)
      selectedMarker={selectedMarker}
      setSelectedMarker={setSelectedMarker}
      // mobile-detect
      isMobile={isMobile}
      setMapParams={setMapParams}
    />
  </div>
);

現在，HOC：

  export const mapHOC = compose(
  themr('map', styles),
  defaultProps({
    options: {
      scrollwheel: true,
      zoomControl: true,
      zoomControlOptions: {
        position: 1, // google.maps.ControlPosition.LEFT_TOP
      },
      minZoom: 3,
      zoom: 10,
      maxZoom: 18,
      // disableDoubleClickZoom: true,
      styles: mapStyles,
    },
    style: {
      flex: 1,
    },
    hoverDistance: 15,
    markerHoverDistance: 15,
    markers: generateMarkers(MARKERS_COUNT, 0.0003),
    }),
  withState('mapParams', 'setMapParams', { center: suslovkaCoords, zoom: 8 }),
  withState('selectedMarker', 'setSelectedMarker', null),
  withProps(({ selectedMarker }) => ({
    isSelected: (marker) => selectedMarker
      ? selectedMarker.id === marker.id
      : false,
  })),
  withHandlers({
    onMapParamsChange: ({ setMapParams }) => ({ center, zoom, bounds }) => {
      setMapParams({ center, zoom, bounds });
      console.log('setMapParams', { center, zoom });
    },
    renderMarker: ({ theme, setSelectedMarker, isSelected, isMobile }) => (marker) => {
      const tooltipMarkerProps = {
        key: marker.id,
        theme: {theme},
        themeNamespace: 'tooltipMarker',
        initialScale: 1,
        defaultScale: 1,
        hoveredScale: 1.3,
        tooltipContent: <RoomTooltip marker={marker} />,
        paddingOffset: 10, // used for tooltip position
        tooltipContentHeight: 240, // no need to be exact, used for tooltip position
        tooltipContentWidth: 200, // no need to be exact, used for tooltip position
        setSelectedMarker: setSelectedMarker,
        selected: isSelected(marker),
        marker: marker,
        ...marker,
      };
      return isMobile
        ? <TooltipMarker {...tooltipMarkerProps } />
        : <HoveredTooltipMarker {...tooltipMarkerProps} />;
    },
    // be sure in current implementation markers is tile markers, not all markers.
    // tiling is used as it allows some perf optimizations not used here
    renderMarkers: () => ({ ctx, markers, tileSize }) => {
      ctx.clearRect(0, 0, tileSize, tileSize);
      const radius = 5;
      markers.forEach(({ /* id, */ x, y }) => {
        // just circles here but can be images, use id or other marker props to render
        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
        ctx.beginPath();
        ctx.arc(x, y, radius + 3, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = 'white';
        ctx.beginPath();
        ctx.arc(x, y, radius + 2, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = '#00b92a';
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
      });
    },
  }),
);

我想從defaultProps中刪除“標記：generateMarkers（MARKERS_COUNT，0.0003）”，並從外部給出標記。

到目前為止我嘗試過的是：

const newmap = mapHOC(map);
class MapWithState extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const markers = generateMarkers(MARKERS_COUNT, 0.0003);
        return (<newmap markers={markers} />);
    }
}
export default MapWithState;
//export default  mapHOC(map);

任何想法如何做這樣的事情？ 我希望可以輕松完成。 謝謝！

Answer 1

創建組件時，React合並道具。

意思是，當實例化一個組件（JSX）時，它會為其創建一個公共數據和私有數據，分別是狀態和道具。

在為組件創建道具時，它接受所有參數道具（來自被調用者），並考慮是否可以在該類中聲明任何默認道具。

類似於Object.assign({}, { ...defaultProps }, { ...userProps }) ，其中defaultProps將被userProps覆蓋。 如果userProps不可用，則將考慮defaultProps 。

因此，在您的情況下，您需要刪除默認道具， <newmap markers={markers} />應該可以。