如何从 React 组件中的电子 main.js 外部访问全局变量？

Question

我正在尝试从 main.js 访问一个全局变量，这是我的电子应用程序启动的地方。

我的结构是这样的……

• main.js（启动 electron app.on）
• 应用程序（文件夹）
  • 组件（文件夹）
    • Landing.js（我想从这里的 main.js 访问一个全局变量！）

这就是我所拥有的......

main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;


app.on('ready', () => {
  mainWindow = new BrowserWindow({
    height: 725,
    width: 1100,
    icon: __dirname + '/app/img/sawIcon.ico',
    title: 'My App'
  });

  // CODE TO GRAB THE ARGUMENT passed in from the commandline 
  global.shareObject = {
    hlpString: process.argv[2]
  }

  console.log(global.sharedObject.hlpProp);   // prints ok

  let url = require('url').format({
    protocol: 'file',
    slashes: true,
    pathname: require('path').join(__dirname, 'index.html')
  })
  console.log(url)
  mainWindow.loadURL(url)
});

app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

登陆.js

import React, { Component } from 'react'
import sass from '../scss/application.scss'
import PropTypes from 'prop-types'
import Header from './Header'
import Menu from './Menu'
import HelpFile from './HelpFile'



class Landing extends Component {
    constructor(props) {
         super(props);
         this.state = { 
             helpFileName: 'Mainmenu',
             menuName: '',
         }
       }

    handleHelpChange(helpFileName) {
        this.setState( {helpFileName} );
    }

    handleMenuClick(menuName) {

        //CONSOLE LOGS that are NOT working...
        console.log(global.shareObject.hlpString);    // prints nothing undefined
        console.log(require('remote').getGlobal('shareObject').hlpString);  // can't build error w/cant find remotes
        this.setState( {menuName} );
    }

    render() {  

        return (
            <div>
                <div>
                    <Header handleMenuClick={this.handleMenuClick.bind(this)}/>
                </div>
                <br /><br />
                <div className="mainMenuDiv">
                    <Menu handleHelpChange={this.handleHelpChange.bind(this)}/>
                </div>
                <div className="mainContainerDiv">
                    <HelpFile name={this.state.helpFileName}/>
                </div>
            </div>

        )
    }
}


export default Landing;

无论我尝试哪种类型的控制台日志，我似乎都无法从 Landing.js 访问我的 global.shareObject。我的代码错了吗？我是否应该尝试从 main.js 导出默认的 const 并将其导入 Landing.js 以访问该变量？非常感谢您的帮助。

Answer 1

您遇到此问题是因为 React 上下文无法访问“fs”模块，这是一个 NodeJS 模块，Electron 正是基于该模块构建的。

所以这是我的代码和你的答案

index.html

  <script>
    var electron = require('electron');
    var serverHost = electron.remote.getGlobal('serverHost')
  </script>

这是我的根 HTML，标记要传递到 App.js

ma​​in.js

global.serverHost = 'http://localhost:7000/';
if (process.env.NODE_ENV === 'PROD') {
  mainWindow.loadURL(`file://${__dirname}/dist/index.html`);
} else {
  mainWindow.loadURL('http://localhost:8080/dist/');
}

然后，从 React 组件中，每次我想访问这个变量时，我都会这样做

console.log(window.serverHost);
> "http://localhost:7000/"

抱歉回复晚了，希望对大家有所帮助...

Answer 2

在你的 Landing.js 中

console.log(require('electron').remote.getGlobal('sharedObject').hlpString)

Source

但是有几个拼错的名字

在 main.js 中

global.shareObject = {
    hlpString: process.argv[2]
}

d 不见了sharedObject

console.log(global.sharedObject.hlpProp); // 打印正常 无法打印，hlpString 是正确的名称