反应组件中的 onDeviceReady 事件监听器

Posted 2023-02-24

【中文标题】反应组件中的 onDeviceReady 事件监听器

【英文标题】：onDeviceReady event listener in react component

【发布时间】：2019-01-15 07:04:59

【问题描述】：

在我的 react 应用程序中，我正在尝试使用 Cordova 插件 (cordovo-plugin-device) 来获取用户的设备版本，如下所示

class LogoHeader extends React.Component 
  componentDidMount () 
    window.addEventListener('deviceready', this.onDeviceReady)
  
  onDeviceReady () 
    console.log(device.cordova)
  
  render () 
    ...
  

但由于某种原因，deviceready 事件永远不会被触发。我错过了什么吗？有没有更好的方法在 react 中监听 DOM 事件？

【参考方案1】：

根据Cordova docs和this SO answer你应该在你的入口文件中添加监听器（可能是index.js）

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const startApp = () => 
    console.log(device.cordova)
    ReactDOM.render(
      <App />,
      document.getElementById('root')
    );


if(!window.cordova) 
  startApp()
 else 
  document.addEventListener('deviceready', startApp, false)

您还可以将device.cordova 作为道具传递给App，以便您可以在其他组件中访问它。

...
ReactDOM.render(
      <App device=device
         ? device.cordova
         : null/>,
      document.getElementById('root')
    );
...