刚刚接触react，还不够明白它的理念和思想。有几个问题想咨询如何做出来。
import * as React from 'react'
import { Map, Marker } from 'react-amap'
import helper from 'immutability-helper'
import ConstVal from 'apollo-common/src/constants'
import EstateDetail from './estateCharts/index'
import classNames from 'classnames'
import './index.scss'
export default class EstateMap extends React.PureComponent<any, any> {
constructor() {
super()
this.state = {
list: {
store: [],
estate: [],
}
}
}
componentDidMount() {
let data = this
fetch('http://192.168.16.239:8080/mockjsdata/44/map/estate/list')
.then(function (response) {
return response.json()
}).then(function (json) {
data.setState({list:json.list})
},
)
}
render() {
//地图参数
const params = {
zooms: [11, 20],
zoom: 10,
plugins: ['MapType', 'OverView', 'Scale', {
name: 'ToolBar',
options: {
autoPosition: true,
},
}],
expandZoomRange: true,
MarkerType: '',
center: { longitude: 121.474017, latitude: 31.222311 },
Events: {
zoomchange: function (target) {
console.log(this.getZoom())
this.getZoom()
},
}
};
const MarkerEvents = {
click: function (e, c) {
e.target.setTop(true)
let option = {
type: e.target.getExtData().split('?')[0],
data: JSON.parse(e.target.getExtData().split('?')[1]),
}
console.log(option.data)
if (option.type === 'estate') {
}
},
mouseover: (e) => {
e.target.setTop(true)
let option = {
type: e.target.getExtData().split('?')[0],
data: JSON.parse(e.target.getExtData().split('?')[1]),
}
console.log(option)
if (option.type === 'store') {
console.log(classNames)
}
},
mouseout: (e) => {
e.target.setTop(false)
let option = {
type: e.target.getExtData().split('?')[0],
data: JSON.parse(e.target.getExtData().split('?')[1]),
}
if (option.type === 'store') {
e.target.setContent(
`<div class='Store_Marker' title=${option.data.name}>
<span class='icon_span'></span>
</div>`,
)
}
}
}
return (
<div className="EstateMap">
<div className="Map-left">
<div className="Map-header">
<div className="header-left">11</div>
<div className="header-right">222</div>
</div>
<Map
amapkey={ConstVal.MAP_KEY}
mapStyle={ConstVal.MAP_STYLEURL}
zooms={params.zooms}
plugins={params.plugins}
center={params.center}
events={params.Events}
expandZoomRange={params.expandZoomRange}
>
{
Object.keys(this.state.list).map((e) => {
return this.state.list[e].map((item, index) => {
return (
<Marker position={item.position} extData={e + '?' + JSON.stringify(item)} key={index} events={MarkerEvents}>
{(() => {
switch (e) {
case 'store': return <Store data={item} />
case 'estate': return <Estate data={item} />
case 'floor': return '#0000FF'
case 'floors': return '#0000FF'
default: return '#0000FF'
}
})()}
</Marker>
)
})
})
}
</Map>
</div>
<div className="Map-right">
<EstateDetail />
</div>
</div>
)
}
}
export class Store extends React.PureComponent<any, any> {
render() {
let isShow:boolean = false;
let classStyle = classNames('icon_name',{
'Show':isShow
})
return (
<div className="Store_Marker" title={this.props.name}>
<span className="icon_span" />
<span className={classStyle}>{this.props.name}</span>
</div>
)
}
}
export class Estate extends React.PureComponent<any, any> {
render() {
const { isMain } = this.props
const classes = classNames('Estate_Marker', {
'small': isMain
})
return (
<div className={classes} />
)
}
}
目前我的问题如下：
click: function (e, c) {
e.target.setTop(true)
let option = {
type: e.target.getExtData().split('?')[0],
data: JSON.parse(e.target.getExtData().split('?')[1]),
}
console.log(option.data)
if (option.type === 'estate') {
//在这里如何将当前marke内的dom添加个class，其他market内的dom去掉class呢？
}
},在这里如何将当前marke内的dom添加个class，其他market内的dom去掉class呢？
