如何使用外部反应组件的eventlisteners和函数？

我在我的主index.html文件中加载了一个库（cordova）。然后我在我的文档中添加了eventlistener'deviceready'。现在我怎么能在反应组件内调用这个函数和相关的库？如何使用外部反应组件的eventlisteners和函数？

HTML文件：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>title</title> 
    </head> 
    <body> 
    <div id="app"></div> 
    </body> 

<script type="text/javascript" src="cordova.js"></script> 
<script> 
    document.addEventListener('deviceready', onDeviceReady); 

    // this is the function I want to call inside my component. 
    // function onDeviceReady() { 
    // var rect = { x: 0, y: 0, width: window.innerWidth, height: window.innerHeight }; 
    // cordova.plugins.camerapreview.startCamera(rect, 'back', true, true, true) 
    // cordova.plugins.camerapreview.show(); 
    // } 
</script> 

</html>

我的反应成分：

import React, { Component } from 'react'; 

class Example extends Component { 

    // Here I want to call my cordova actions inside the eventlistener 

    render() { 
    return (
     <div> 
     <p>Example</p> 
     </div> 
    ); 
    } 
} 

export default Example;

来源

2016-11-08 Jim Peeters

通过使用Reacjs lifesycle是添加和删除事件

所以，你可以做这样的事情有道：

import React, { Component } from 'react'; 

class Example extends Component { 

    componentDidMount() { 
    document.addEventListener('deviceready', this.deviceReady); 
    } 

    componentWillUnmount() { 
    document.removeEventListener('deviceready', this.deviceReady); 
    } 

    deviceReady() { 
    // Do some stuff 
    } 

    render() { 
    return (
     <div> 
     <p>Example</p> 
     </div> 
    ); 
    } 
} 

export default Example;

来源

2016-11-08 09:21:43 JoseAPL

如何使用外部反应组件的eventlisteners和函数？

回答

相关问题