Javascript 如何使用外部组件的EventListener和函数？_Javascript_Cordova_Reactjs

Javascript 如何使用外部组件的EventListener和函数？

javascript cordova reactjs

Javascript 如何使用外部组件的EventListener和函数？,javascript,cordova,reactjs,Javascript,Cordova,Reactjs,我在主index.html文件中加载了一个库（cordova）。然后，我在文档中添加了eventlistener“deviceready”。现在，如何调用react组件中的此函数和相关库 Html文件： <!DOCTYPE html> <html> <head> <title>title</title> </head> <body> <div id="app"><

我在主index.html文件中加载了一个库（cordova）。然后，我在文档中添加了eventlistener“deviceready”。现在，如何调用react组件中的此函数和相关库

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>


标题
文件。添加的监听器（'deviceready'，onDeviceReady）；
//这是我想在组件内部调用的函数。
//函数ondevicerady（）{
//var rect={x:0，y:0，宽度：window.innerWidth，高度：window.innerHeight}；
//cordova.plugins.camerapreview.startCamera（rect'back'，true，true，true）
//cordova.plugins.camerapreview.show（）；
// }

我的反应组件：

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;

import React，{Component}来自'React'；
类示例扩展组件{
//这里我想调用eventlistener中的cordova操作
render（）{
返回(
范例
);
}
}
导出默认示例；

使用是添加和删除事件的正确方法

所以你可以这样做：

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;

import React，{Component}来自'React'；
类示例扩展组件{
componentDidMount（）{
文件.addEventListener（'DeviceRady'，this.DeviceRady）；
}
组件将卸载（）{
document.removeEventListener（'deviceready'，this.deviceready）；
}
DeviceRady（）{
//做点什么
}
render（）{
返回(
范例
);
}
}
导出默认示例；

使用是添加和删除事件的正确方法

所以你可以这样做：

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;

import React，{Component}来自'React'；
类示例扩展组件{
componentDidMount（）{
文件.addEventListener（'DeviceRady'，this.DeviceRady）；
}
组件将卸载（）{
document.removeEventListener（'deviceready'，this.deviceready）；
}
DeviceRady（）{
//做点什么
}
render（）{
返回(
范例
);
}
}
导出默认示例；