Wie können EventListener und -Funktionen von außen auf Komponenten reagieren?

Ich habe eine Bibliothek (Cordova) in meine Hauptindex.html Datei geladen. Dann habe ich den Eventlistener 'deviceready' auf meinem Dokument hinzugefügt. Nun, wie kann ich diese Funktion und die zugehörige Bibliothek in einer reaktiven Komponente aufrufen?Wie können EventListener und -Funktionen von außen auf Komponenten reagieren?

Html-Datei:

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

Mein reagieren Komponente:

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;

Quelle

2016-11-08 Jim Peeters

Durch Reacjs lifesycle mit einem richtigen Weg ist Ereignisse hinzufügen und entfernen

So können Sie etwas tun :

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;

Quelle

2016-11-08 09:21:43 JoseAPL

Wie können EventListener und -Funktionen von außen auf Komponenten reagieren?

Antwort

Verwandte Themen