content: /**
   *  Cannot read property 'replaceChild' of null
   */
  
  import React from 'react';
  import styled from 'styled-components';
  
  const Ul = styled.ul`
    list-style: none;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    margin: 0.6rem 0;
  `;
  
  const Li = styled.li`
    padding: .3em 1em;
    color: #F44336;
    line-height: 1.8rem;
    cursor: pointer;
    border-radius: 0.28571429rem;
  
    &:hover {
      background-color: rgba(0,0,0,.03);
    }
  `;
  
  const Span = styled.span`
    color: #9E9E9E;
    font-size: 10px;
    margin-left: 6px;
  `;
  
  class Tip extends React.Component {
  
    constructor() {
      super();
      this.handleClick = this.handleClick.bind(this); // here must bind this or the error no such a props will occur(this.props => will bind wrong this)
    }
  
    handleClick() {
      const {data, moveMap} = this.props;
      const loc = data.get('location'); // loc is the instance of AMAP.lnglat
      const lng = loc.getLng();
      const lat = loc.getLat();
      moveMap({lng, lat});
    }
  
    render() {
      const { data } = this.props;
      const id = data.get('id');
      const name = data.get('name');
      const district = data.get('district');
      return (
        <Li onClick={this.handleClick}>
          {name}<Span>{district}</Span>
        </Li>
      );
    }
  }
  
  class Tips extends React.PureComponent {
    render() {
      const { datas, moveMap } = this.props;
      let content;
      if (datas.size == 0) {
        content = <Li> NO RESULT !!! </Li>;
      } else {
        content = datas.map(function (data) {
          return <Tip key={data.get('id')} data={data} moveMap={moveMap}></Tip>
        });
      }
      return (
        <Ul>
          {content}
        </Ul>  
      );
    }
  }
  
  export default Tips;
  