简体   繁体   English

如何在Reactjs中使用ActiveX?

[英]How can I use ActiveX in Reactjs?

In my project, I need a usbkey to login. 在我的项目中,我需要一个usbkey才能登录。 The interface of usbkey is Activex. usbkey的接口是Activex。 In jquery way, the code just like below: 以jquery的方式,代码如下所示:

<html>
     <object style='display:none' 
      classid='clsid:28540C7-D724-4156-9E42-12BD' 
      codebase='Active/RaActive.CAB#version==-1,-1,-1,-1'  
      id='Ctrl'></object>
     <scrpit>
       $(document).ready(function() {
        Ctrl.initUxtApi();
       }
     </scrpit>
</html>

how can i change it to reactjs way? 如何将其更改为reactjs方式? The following code is my react way, but i think it is not a good method . 以下代码是我的反应方式,但我认为这不是一个好方法。

class USBKey extends Component {

 componentDidMount() {
 const Ctrl = document.getElementById('Ctrl');
 console.log(Ctrl);
 let loginflag = -1;
 loginflag = Ctrl.initUxtApi();
 console.log(loginflag);
}

activeX ()
{
  return {__html: '<object style=\'display:none\' 
 classid=\'clsid:1221012-212-4156-9E42-121212\' ' +
'codebase= \'/RaActive.CAB#version==-1,-1,-1,-1\' ' +
' id=\'Ctrl\'></object>'}
};

render() {
 return (
  < div >
    <div dangerouslySetInnerHTML={this.activeX()} />
  </ div >
);}
}

I will read a certification from UsbKey and send it to cloud. 我将阅读UsbKey的认证并将其发送到云。 just like this: Ctrl.readCert(); 就像这样: Ctrl.readCert();

Disclaimer, I don't work with ActiveX, but I believe you can do something like: 免责声明,我不使用ActiveX,但我相信您可以执行以下操作:

index.html 的index.html

// outside of React
// leave this as is, it doesn't need to be inside react to use it 
// in react
<object style='display:none' 
  classid='clsid:28540C7-D724-4156-9E42-12BD' 
  codebase='Active/RaActive.CAB#version==-1,-1,-1,-1'  
  id='Ctrl'></object>

// Your react mount point
<div id="app"></div>

app.js app.js

class USBKey extends Component {

    constructor(props) {
        super(props);
        this.state = { loginFlag: -1 };
    }

    componentDidMount() {
        const Ctrl = document.getElementById('Ctrl');
        this.setState({
            loginFlag: Ctrl.initUxtApi(),
        });        
    }

    render() {
        return <div>{this.state.loginFlag}</div>
    }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM