如何从 renderer.js 调用反应组件代码？

Question

Hi I am new to React/JS and Electron and would like to write a desktop application using these technologies.嗨，我是 React/JS 和 Electron 的新手，想使用这些技术编写桌面应用程序。

The problem I am facing now is that I am not sure how to call react component code from renderer.js.我现在面临的问题是我不确定如何从 renderer.js 调用 react 组件代码。 I have such coding structure.我有这样的编码结构。

electron-tutorial电子教程

    src/
        components/Test.js
        application.js
        electron-starter.js
        mainWindow.html
    package.json

And this is a list of code snippet of each file.这是每个文件的代码片段列表。

package.json: package.json：

  "main": "src/electron-starter.js",

electron-starter.js电子启动器.js

const application = require("./application");
global.application = new application();
global.application.run();

application.js应用程序.js

odule.exports = class Application {
  createWindow() {
    this.mainWindow = new BrowserWindow({
      width: 1366,
      height: 768,
...
        pathname: path.join(__dirname, "./mainWindow.html"),

mainWindow.html主窗口.html

<body>
  <div id="test"></div>
  <script src="./renderer.js"></script>
</body>

So from mainWindow.html I want to call renderer.js.所以我想从 mainWindow.html 调用 renderer.js。 I learned that I know I can call functions in such way:我了解到我知道我可以这样调用函数：

renderer.js渲染器.js

"use strict";

const { shell } = require("electron");

function hoge() {
  console.log("hoge");
}

window.hoge();

But what I want to do is to call the react component below from renderer.js.但是我想做的是从renderer.js调用下面的react组件。

Test.js测试.js

import React from "react";

export class Test extends React.Component {
  render() {
    return <h1>Hello from Test class</h1>;
  }
}

Could you please help me?请你帮助我好吗？ Thanks for reading !谢谢阅读！

Answer 1

As you are just starting out, I would recommend that you use a boilerplate like Electron-React .当您刚刚开始时，我建议您使用像Electron-React这样的样板。

如何从 renderer.js 调用反应组件代码？

问题描述

1 个解决方案

解决方案1
0 2021-03-18 14:25:16

如何从 renderer.js 调用反应组件代码？

问题描述

1 个解决方案

解决方案1 0 2021-03-18 14:25:16

解决方案1
0 2021-03-18 14:25:16