时间戳

首页 > 解决方案 > Electron - 未渲染 React 组件

reactjs - Electron - 未渲染 React 组件

问题描述

几天来，我一直在努力让自己熟悉带有反应库的所谓简单的电子框架。但是，我现在必须放弃，请您帮助我。

这是我的简单项目：

在此处输入图像描述

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />

    <title>My page</title>

  </head>
  <body>

    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>

    <!-- -->
    <div id="root"></div>

  </body>
</html>

main.js

const electron  = require('electron');
const path      = require('path');
const url       = require('url');

const {app, BrowserWindow} = electron;

let mainWindow;

// Listen for app to be ready
app.on('ready', function(){

    // Create new window
    mainWindow = new BrowserWindow({width: 800, height: 600});

    // Load html in window
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    // Quit app when closed
    mainWindow.on('closed', function(){
        app.quit();
    });
});

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Dashboard from './pages/dashboard';

ReactDOM.render(<Dashboard />, document.getElementById('root'));

src/pages/dashboard.js

import React from 'react';

class Dashboard extends React.Component {
    render() {
        const {classes} = this.props;
        return (
            <div className={classes.root}>
                Test Message
            </div>
        );
    }
}

export default Dashboard;

包.json

{
  "name": "create-react-app",
  "version": "3.2.2",
  "private": true,
  "main": "public/main.js",
  "homepage": "./",
  "scripts": {
    "start": "electron .",
    "build": "react-scripts build"
  },
  "devDependencies": {
    "electron": "4.0.6",
    "foreman": "3.0.1",
    "react-scripts": "2.1.5"
  },
  "dependencies": {
    "@material-ui/core": "3.9.2",
    "prop-types": "15.7.2",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-scripts": "2.1.5"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

我可以构建应用程序并启动它，但不显示 HTML 页面（仪表板）。

我会很高兴有任何帮助。

标签： reactjselectron

解决方案

推荐阅读