我有一个使用React的地图应用程序。
它包含3个组成部分:
看法:
export default class MapView extends Component {
render() {
return (
<div>
<Sidebar />
<MapWrapper />
</div>
);
}
侧边栏:
export default class Sidebar extends Component {
render() {
return (
<div>
<ul>
<li>MAPS</li>
<li onClick=zoomIn> Zoom In + </li>
<li onClick=zoomOut> Zoom Out - </li>
</ul>
</div>
);
}
}
地图就是这样:https : //github.com/pka/ol3-react-example
现在,我想实现以下逻辑:按下缩放将放大地图。
如何使用mobx做到这一点?
这家商店将持有什么?什么是观察者,什么是可观察者?
问候,伊豆
我会做这样的事情:
// The store:
class MapStore {
@observable zoom = 4;
}
const store = new MapStore();
// The component:
export default function Sidebar(props) {
return (
<div>
<ul>
<li>MAPS</li>
<li onClick={zoomIn}> Zoom In + </li>
<li onClick={zoomOut}> Zoom Out - </li>
</ul>
</div>
);
}
// The click handlers
function zoomIn() {
store.zoom++;
}
function zoomOut() {
store.zoom--;
}
// The observer
// See docs: https://mobxjs.github.io/mobx/refguide/reaction.html
mobx.reaction(
() => store.zoom,
(zoom) => {
map.getView().setZoom(zoom);
}
);
我没有介绍的一些内容:
map
实例。zoom
。本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句