0
76
VisualizaçõesEl componente HTML no se procesa en la aplicación de reacción de electrones
La barra de títulos de Component.js no se muestra como html en mi aplicación electrónica, no recibo errores y he confirmado las rutas de los archivos.
componente.js,
import React, { Component } from "react"; export default class TitleBar extends React.Component { render() { return( <div id="TitleBar"> <button id="minButton">_</button> <button id="maxButton">[]</button> <button id="exitButton">X</button> </div> ); } } export default class NavBar extends React.Component { render() { return( <div id="NavBar"> <button id="homeButton">Home</button> </div> ); } }índice.js,
import React from "react"; import ReactDOM from "react-dom"; import TitleBar from "./Components.js"; console.log('intro'); ReactDOM.render(<TitleBar />, document.getElementById('app'));índice.html,
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DevFlow</title> <link rel="stylesheet" href="index.css"> </head> <body> <main id="app"></main> <script defer type="text/babel" src="./index.js"></script> </body> </html>Cuando ejecuto el comando "npm start", aparece la aplicación, sin embargo, no hay ningún componente dentro de las etiquetas. Cualquier ayuda sería muy apreciada. También incluiré mi Main.js aunque no creo que sea necesario para diagnosticar mi problema. Gracias
Principal.js,
const { app, BrowserWindow } = require('electron'); const path = require('path'); if (require('electron-squirrel-startup')) { app.quit(); } const createWindow = () => { const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, frame: false }); mainWindow.loadFile(path.join(__dirname, 'index.html')); mainWindow.webContents.openDevTools(); }; app.on('ready', createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } });3 Respostas
Responde à pergunta0
Intente agregar <base href="/"> en la parte superior de su archivo index.html.
0
Tal vez necesite agregar la secuencia de comandos del navegador babel:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DevFlow</title> <link rel="stylesheet" href="index.css"> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script> </head> <body> <main id="app"></main> <script defer type="text/babel" src="./index.js" data-type="module"></script> </body> </html>0
Resolvió mi problema:
el intérprete del navegador no puede leer el archivo index.js porque debe compilarse en Vanilla JS.
Lo que intentaré hacer con webpack