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

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

我的结构是这样的

• main.js（启动electron应用程序）
• 应用程序（文件夹）
  • 组件（文件夹）
    • 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;

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

import React，{Component}来自“React”
从“../scss/application.scss”导入sass
从“道具类型”导入道具类型
从“./头”导入头
从“./菜单”导入菜单
从“./HelpFile”导入帮助文件
类扩展组件{
建造师（道具）{
超级（道具）；
this.state={
helpFileName:“主菜单”，
Menuame:“，
}
}
handleHelpChange（帮助文件名）{
this.setState（{helpFileName}）；
}
handleMenuClick（菜单名）{
//控制台日志不工作。。。
console.log（global.shareObject.hlpString）；//不打印任何未定义的内容
console.log（require（'remote'）.getGlobal（'shareObject'）.hlpString）；//找不到远程设备时无法生成错误
this.setState（{menuName}）；
}
render（）{
返回(



)
}
}
导出默认着陆；

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

在您的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;

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

但是有几个名字错了

在main.js中

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

d缺少

sharedObject

console.log（global.sharedObject.hlpProp）；//打印好吗

---

无法打印ok，hlpString是正确的名称

您遇到此问题是因为React上下文无法访问'fs'模块，该模块是NodeJS模块，Electron是在其上构建的

这是我的密码和你的答案

index.html

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

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

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

---

很抱歉回复太晚，希望这能帮助某人…

这将不起作用，因为我无法访问remote。未找到模块中的错误：错误无法解析“fs”。不管出于什么原因，我不能在我的Landing.js中包含electron或electron.remote，只是为了确定，我发布的代码不是你自己的。你

require（'remote'）

但是文件上说

require（'electron'）。remote

是的，我试过你的，它抛出了同样的错误。我甚至不能从着陆舱内的“电子”导入电子。对不起，我不知道为什么，我也不能复制。我最后的怀疑是范围。您在React的上下文中提出“要求”；试着把它放在全球范围内，这就是我要做的。是否可以将变量保存到main.js的导出中？这样我就可以将字符串导入Landing.js了？