如何使用外部反應組件的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和函數？

回答

相關問題