реакция-маршрутизатор-дом Ссылка не работает в пользовательском всплывающем окне реакции листовки - PullRequest
Новая
       21

реакция-маршрутизатор-дом Ссылка не работает в пользовательском всплывающем окне реакции листовки

0 голосов
/ 12 апреля 2019

На самом деле, я использую реагирующую листовку с пользовательским всплывающим окном, когда я пытался использовать в нем компонент Resact-router-dom Link, чем я получил ошибку 

"leaflet": "^1.4.0",
"leaflet.markercluster": "^1.3.1",
"react": "^16.5.2",
"react-dom": "^16.8.4",
"react-router-dom": "4.3.1",
"react-router-redux": "5.0.0-alpha.9",

React Router Link не работает с LeafletJS

Я пробовал вышеупомянутую ссылку, но все равно получил ошибку. 

 *
 * CustomPopup
 *
 */
import React from 'react';
import Moment from 'moment';
import {extendMoment} from "moment-range";
import {Link, withRouter} from "react-router-dom";
import currencyFormatter from "../../utils/currencyFormatter";

const moment = extendMoment(Moment);

const CustomPopup = (props) => {
    const { item } = props;
    return (
        <div className='map-properties'>
            <div className='map-img'>
                <img
                    style={{width: "301px", height: "203px"}}
                    src={item.image ? `${item.image}`: "http://placehold.it/301x203"}
                    className="custom-img"
                    onError={(e)=>{e.target.onerror = null; e.target.src="http://placehold.it/301x203"}}

                />
            </div>
            <div className='map-content'>
                <h4><a href='properties-details.html'> {item.title} </a></h4>
                {item.address && <p className='address'> <i className='fa fa-map-marker'></i> {item.address} </p>}
                <p className='description'> description </p>
                <div className='map-properties-fetures'>
                <span><i className='flaticon-square-layouting-with-black-square-in-east-area'></i>{item.area}  sqft<sup>2</sup></span>
                <span className="right"><i className='flaticon-bed'></i>{item.bedrooms}</span>
                <span><i className='flaticon-holidays'></i>{item.bathrooms}</span>
                <span className="right">
                    <i className="fa fa-calendar"></i> {moment.range(moment(item.created_at), moment()).diff('days')} Days ago
                </span>
                </div>
                <div className='map-properties-btns'>
                    <a className='border-button-sm border-button-theme' style={{marginRight: "5px"}}>
                        {currencyFormatter(item.price)}
                    </a>

##below the React Router Dom component <Link/>##
  <Link href='properties-details' className='button-sm button- theme'>Details</Link>
                </div>
            </div>
        </div>
    );
};

export default CustomPopup;
/**
 *
 *End of CustomPopup
 *
 */

/**
 *
 * LeafLet Map Container where i use above custom popup
 *
 */
import "./index.css";
import React, {Fragment, PropTypes } from 'react';
import CustomPopup from "../../components/CustomPopup";
import {createClusterCustomIcon, ThemePointer} from "../../components/CustomMarker";
import 'react-leaflet-markercluster/dist/styles.min.css';
import MarkerClusterGroup from 'react-leaflet-markercluster';
import {TileLayer, Marker, Popup, Map, LayersControl,} from 'react-leaflet';
import {withRouter} from "react-router-dom";
import ContextProvider from "../../components/ContextProvider";

export const Context = React.createContext({});

const MyPopupMarker = (props) => {
    const { item } = props;
    let lat = item.latitude ? item.latitude : 0.0000;
    let lng = item.longitude ? item.longitude : 0.0000;
    return (
        <Marker  position={[lat, lng]} icon={ThemePointer}>
            <Popup>

                   <CustomPopup key={item.id} item={item} />
            </Popup>
        </Marker>
    );
};

const MyMarkersList = (props) => {
    const { markers } = props;
    const items = markers && markers.length > 0 ? markers.map((item, index) => (
        <MyPopupMarker key={item.id} item={item} context={props.context}/>
    )): "";
    return <Fragment>{items ? items : ""}</Fragment>;
};

const { BaseLayer,} = LayersControl;


class LeafLetMap extends React.PureComponent{

    updateDimensions() {
        const height = window.innerWidth >= 992 ? window.innerHeight : 400
        this.setState({ height: height - 348 })
    }

    componentWillMount() {
        this.updateDimensions()
    }

    componentDidMount() {
        window.addEventListener("resize", this.updateDimensions.bind(this))
        console.log(this.props.context)
    }

    componentWillUnmount() {
        this._isMounted = false;
        window.removeEventListener("resize", this.updateDimensions.bind(this))
    }

    render(){
        const {filterPropertiesList, featuredPropertyList} = this.props;
        let markers;
        if(!filterPropertiesList.isSearched && featuredPropertyList.data.length > 0){
            markers = featuredPropertyList.data;
        }else if(filterPropertiesList.isSearched && filterPropertiesList.data.properties.length > 0){
            markers = filterPropertiesList.data.properties;
        }
        return (
            <Map style={{ height: this.state.height }} center={[25.0657, 55.17128]} zoom={16}>
                <LayersControl position="bottomleft">
                    <BaseLayer checked name="Default">
                        <TileLayer
                            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                            url="http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}"
                            subdomains={['mt0','mt1','mt2','mt3']}
                        />
                    </BaseLayer>
                    <BaseLayer name="Satellite">
                        <TileLayer
                            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                            url="http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
                            subdomains={['mt0','mt1','mt2','mt3']}
                        />
                    </BaseLayer>
                 </LayersControl>
                <MarkerClusterGroup iconCreateFunction={createClusterCustomIcon}>
                        <MyMarkersList markers={markers} />
                </MarkerClusterGroup>
            </Map>
        );
    }
}

export default LeafLetMap;

Предупреждение: сбойный тип проп: пропел to помечен как обязательный в Link, но его значение равно undefined.

Предупреждение: сбойный тип контекста: контекст router помечен как требуется в Link, но его значение равно undefined.

Я упомянул версии библиотек, почтовый контейнер и пользовательское всплывающее окно, в котором я использовал компонент Combo Router DOM. Я также вставляю предупреждения как результат.

...