Визуализация элемента с помощью ReactDOM и Electron - PullRequest
Новая
       3

Визуализация элемента с помощью ReactDOM и Electron

0 голосов
/ 24 апреля 2020

У меня проблемы с отображением простейших элементов в электронном приложении после запуска electron-forge start. Я довольно новичок в React и Electron, и все, что я пытаюсь сделать, это визуализировать элемент h1, говорящий «Hello, World». Мой код работает в коде, но не в моем файле index. html. Ниже приведены подробности.

зависимости: 

  "dependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "draft-js": "^0.11.5",
    "electron-compile": "^6.4.4",
    "electron-devtools-installer": "^2.2.4",
    "electron-squirrel-startup": "^1.0.0",
    "express": "^4.17.1",
    "express-session": "^1.17.1",
    "material-ui": "^0.20.2",
    "mongoose": "^5.9.10",
    "passport": "^0.4.1",
    "passport-local": "^1.0.0",
    "react": "^15.6.2",
    "react-dom": "^15.6.2",
    "react-hot-loader": "^3.1.3",
    "socket.io-client": "^2.3.0"
  },
  "devDependencies": {
    "@babel/node": "^7.8.7",
    "@babel/preset-env": "^7.9.5",
    "babel-core": "^7.0.0-bridge.0",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "electron-forge": "^5.2.4",
    "electron-prebuilt-compile": "8.2.0",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.19.0",
    "nodemon": "^2.0.3",
    "socket.io": "^2.3.0"
  }

index. html. В теге сценария я попытался использовать type="text/babel", а также type="text/jsx", но это не имело никакого значения: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="index.css">
</head>
<body style="overflow: hidden; background-color: rgba(0,0,0,0); margin: 0" >
  <div id="App"></div>
</body>

<script type="text/jsx">
import React from 'react';
import ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
//import RaisedButton from 'material-ui/RaisedButton';
//<RaisedButton color = "primary">Bold</RaisedButton>


//app will be rendered into the div with ID of App
//THIS IS WHAT FAILS TO BE RENDERED
const render = () => {
  const App = require('./app.jsx').default;
  const hello = <h1>Hello, world</h1>;
  ReactDOM.render(hello, document.getElementById('App'));
  /*
  ReactDOM.render(<AppContainer>
    <MuiThemeProvider>
      <App/>
    </MuiThemeProvider>
    </AppContainer>, document.getElementById('App'));
    */
}

render();
if (module.hot) {
  module.hot.accept(render);
}
</script>
</html>

Когда Electron запускается и я проверяю элементы, я вижу, что элемент не появляется в html, но (я думаю) это выглядит нормально в сценарии: 

<html lang="en"><head><script src="__magic__file__to__help__electron__compile.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="index.css">
</head>
<body style="overflow: hidden; background-color: rgba(0,0,0,0); margin: 0">
  <div id="App"></div>


<script type="application/javascript">'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactHotLoader = require('react-hot-loader');

var _MuiThemeProvider = require('material-ui/styles/MuiThemeProvider');

var _MuiThemeProvider2 = _interopRequireDefault(_MuiThemeProvider);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

//import RaisedButton from 'material-ui/RaisedButton';
//<RaisedButton color = "primary">Bold</RaisedButton>


//app will be rendered into the div with ID of App
//THIS IS WHAT FAILS TO BE RENDERED
const render = () => {
  const App = require('./app.jsx').default;
  const hello = _react2.default.createElement(
    'h1',
    null,
    'Hello, world'
  );
  _reactDom2.default.render(hello, document.getElementById('App'));
  /*
  ReactDOM.render(<AppContainer>
    <MuiThemeProvider>
      <App/>
    </MuiThemeProvider>
    </AppContainer>, document.getElementById('App'));
    */
};

render();
if (module.hot) {
  module.hot.accept(render);
}
;

var _temp = function () {
  if (typeof __REACT_HOT_LOADER__ === 'undefined') {
    return;
  }

  __REACT_HOT_LOADER__.register(render, 'render', '/home/kitan/Projects/DocShare/src/index.html:inline_0.jsx');
}();

</body></html>
...

.compiler c

{
  "env": {
    "development": {
      "application/javascript": {
        "presets": [
          ["env", { "targets": { "electron": "1.6.0" } }],
          "react"
        ],
        "plugins": ["transform-async-to-generator", "transform-object-rest-spread", "transform-class-properties", "transform-es2015-classes", "react-hot-loader/babel"],
        "sourceMaps": "inline"
      }
    },
    "production": {
      "application/javascript": {
        "presets": [
          ["env", { "targets": { "electron": "1.6.0" } }],
          "react"
        ],
        "plugins": ["transform-async-to-generator", "transform-object-rest-spread", "transform-class-properties", "transform-es2015-classes"],
        "sourceMaps": "none"
      }
    }
  }
}

Я также довольно новичок в фактической публикации в StackOverlow тоже, так что если у вас, ребята, есть какие-либо критические замечания, я бы приветствовал их улучшить мою публикацию. Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...