Question

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

我的结构是这样的......

main.js（启动电子app.on）
app（文件夹）
- 组件（文件夹）
  - 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();
  }
});

Landing.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

在你的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是正确的名称

Answer 2

你遇到了这个问题，因为React上下文无法访问'fs'模块，这是一个NodeJS模块，这是Electron构建在它之上的。

所以这是我的代码和你的

的答案

<强>的index.html

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

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

<强> main.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/"

对不起，迟到的回复，希望这有助于某人...

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

2 个答案: