2016-12-04 1 views
2

Dans mon projet, j'ai besoin d'un usbkey pour me connecter. L'interface d'usbkey est Activex. En chemin jquery, le code comme ci-dessous:Comment puis-je utiliser ActiveX dans Reactjs?

<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> 

comment puis-je changer pour reactjs façon? Le code suivant est ma façon de réagir, mais je pense que ce n'est pas une bonne méthode.

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 > 
);} 
} 

Je vais lire une certification de UsbKey et l'envoyer au cloud. comme ceci: Ctrl.readCert();

+0

Mon anglais est pauvre, si vous ca n corrige mon expression! aidez-moi s'il vous plaît, je l'appricierai! –

+1

Pouvez-vous montrer votre code de réaction ou ce que vous essayez de faire? – Chris

+0

Je vais lire une certification de UsbKey via ActiveX. –

Répondre

0

Avertissement, je ne travaille pas avec ActiveX, mais je crois que vous pouvez faire quelque chose comme:

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

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> 
    } 
}