高次コンポーネント：デフォルトの小道具

Question

私はこのコードを持っており、HOCを反応クラスでラップしようとしています。私が最初にしたいのは、デフォルトのパラメータの一部を上書きすることです。

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：

だからここに私のコード（ あなたが全体のコード、そのわずかHOCでdefaultPropsについての質問を読む必要はありません）

まずコンポーネントです

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から「marker：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

コンポーネントが作成されているときに、反応マージの小道具。

平均して、コンポーネント（JSX）がインスタンス化されているとき、パブリックデータとプライベートデータ、つまりそれぞれ状態と小道具が作成されます。

成分に小道具を作成それは（呼び出し先から）すべての引数の小道具をとり、また、任意の既定の小道具は、それが中に埋めることができ、そのクラス内で宣言された場合に考慮する。

Object.assignような何か（{} 、{... defaultProps}、{... userProps}） デフォルトの小道具はユーザー小道具で上書きされます。ユーザーの小道具が利用できない場合、デフォルトの小道具が考慮されます。

あなたの場合、デフォルトの小道具を削除する必要があります。<newmap markers={markers} />これは動作するはずです。