标签 ant design pro 下的文章

ant design pro 怎么使用原生高德地图插件,怎么引入外部js文件使用


index.less:

.sssssssss{
  height: 500px;
  width: 100%;
}

index.tsx:

import React, { useState, useEffect } from 'react';
import MapComponent from './gddt'

export default () => {
  const [loading, setLoading] = useState<boolean>(true);
  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  }, []);

  return (
    <>
    <MapComponent />
    </>
  );
};

gddt.tsx代码:

import React from 'react';
import styles from './index.less';


// tslint:disable-next-line:max-classes-per-file
class MapComponent extends React.Component {

    public componentDidMount() {
        window.onLoad = function () {
            var map = new AMap.Map('map');
        }
        var url = 'https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&callback=onLoad';
        var jsapi = document.createElement('script');
        jsapi.charset = 'utf-8';
        jsapi.src = url;
        document.head.appendChild(jsapi);
    }
    public render() {
        return (
            <>   //这里要加样式 高 宽
                <div id="map" className={styles.sssssssss} ></div>
            </>
        )
    }
}

export default MapComponent;

效果图:
QQ图片20200323161027.png


ant design pro 怎么使用websocket 推送消息


namespace: 'global',

state: {
  collapsed: false,
  notices: [],
},

reducers: {
     saveNoticesWebsock(state, { payload }): GlobalModelState {//此处可以根据自己的业务写
      let dd=[...payload,...state.notices];
      console.log(dd,"saveNoticesWebsock")
      return {
        collapsed: false,
        ...state,
        notices: dd,
      };
    },
},

subscriptions: {
    setup({ dispatch,history }): void {
      
      // Subscribe history(url) change, trigger `load` action if pathname is `/`
      history.listen(({ pathname, search }): void => {
        if (typeof window.ga !== 'undefined') {
          window.ga('send', 'pageview', pathname + search);
        }
        if (!pathname.indexOf('/welcome')) {
          const ws = new WebSocket('ws://127.0.0.1:1234/websocket');
          ws.onmessage = function(msg) { 
            console.log('接收服务端发过来的消息', msg); 
            // result += msg.data + '\n'; 
            dispatch({
              type: 'saveNoticesWebsock', 
              payload: JSON.parse(msg.data),
            });
          }; 
          ws.onclose = function (e) {
              console.log('ws 连接关闭了');
          }
        }
      });
    }
  },