JSFiddle - React, Tailwind, and code Playground

by ioslh

HTML

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://unpkg.com/react-amap@1.0.0/dist/react-amap.js"></script>
  <div id="root" style="width:500px;height: 400px;"></div>

CSS

#root{
  position: relative;
}
#zoom-ctrl {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #fff;
    padding: 5px;
    border: 1px solid #333;
}
#zoom-ctrl span{
  display: inline-block;
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  background: #333;
  color: #fff;
  font-size: 16px;
  border: 1px solid #333;
}
#zoom-ctrl span:hover{
  background: #fff;
  color: #333;
}

Babel + JSX

const Map = ReactAMAP.Map;

const ZoomCtrl = (props) => {
  const map = props.__map__;
  if (!map) {
    console.log('组件必须作为 Map 的子组件使用');
    return;
  }
  const zoomIn = () => map.zoomIn();
  const zoomOut = () => map.zoomOut();

  return (<div id="zoom-ctrl">
    <span onClick={zoomIn}>+</span>
    <span onClick={zoomOut}>-</span>
  </div>);
};


class MyMap extends React.Component {
	render(){
  	return <Map >
      <ZoomCtrl />
    </Map>
  }
}

ReactDOM.render(<MyMap/>, document.getElementById('root'));