React UmiJS使用Ocx控件

在这之前，假设你已经对React、UmiJS和yarn都已经熟悉。

首先，使用 yarn 安装 umijs 的脚手架插件，如下：

yarn global add umi

使用 umi -v 查看 umi 的版本信息，如下：

C:\Users\huangxin> umi -v
2.6.17

然后通过 yarn create umi 去创建项目（不会请查看 “使用脚手架创建UmiJS项目”）。

此时，我们项目就创建完成了。你可以使用 yarn 命令去安装项目依赖，yarn start 去启动项目。

react广告位

实例：

进入到项目的 src/pages 目录，创建一个 demo 目录，在该目录下面创建一个 Demo.js。代码如下：

/* eslint-disable jsx-a11y/alt-text */
function handleLoadError() {
    console.error("加载基础AX控件失败");
}
function initAx() {
    // 初始化控件
    // 根据ID获取控件
    let axObject = document.getElementById("basicPanel");
    console.log(axObject);
    // 调用 AX 的 My_ActiveX_Init() 方法去初始化控件
    // 根据自己 AX 提供的方法去调用
    // 注意：My_ActiveX_Init方法是你AX特有的方法
    let ret = axObject.My_ActiveX_Init();
    console.log(ret);
}

export default function() {
    setTimeout(function(){
        console.log("去初始化ax")
        initAx();
    }, 1000);
    return (
        <div>
            {/* OCX控件 */}
            <object id="basicPanel" classID="CLSID:6C4C424C-7911-45C9-88CA-9E20965730D8"
                        style={{height:0, display:"inherit"}}
                        onError={handleLoadError}></object>
        </div>
    );
}

注意：

1、项目需要在IE下面去运行

2、运行AX控件，不要使用 React 生命周期的方式（继承 React.Component），可能有问题。

3、要在IE下面运行，需要修改 .umirc.js 配置文件。添加：

export default {
  treeShaking: true,
  targets: { // 就是这个标签，下面表示支持在IE11上面运行
    ie: 11,
  },...
}