Это ошибка, которую я получаю внутри 2-го windows Dev Tools
Когда я пытаюсь открыть свое второе окно с помощью кнопки, страница открывается правильно, но React не отображает мою форму. Я не уверен, что я делаю неправильно, так как это должно сделать это. HTML для 2-го окна загружается правильно, но реакция не отображается.
Мой пакет. json
{
"name": "electron_react_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"electron-is-dev": "^1.1.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"concurrently": "^5.1.0",
"electron": "^8.1.0",
"electron-builder": "^22.4.0",
"wait-on": "^4.0.1"
},
"main": "public/electron.js"
}
Мое второе окно HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Product</title>
</head>
<body>
<div id="Product-Form">
</div>
<script src="../src/indexAdd.js"></script>
</body>
</html>
My React Component (эта часть не рендерится)
import React from 'react'
class AddProductForm extends React.Component{
constructor(){
super()
this.state = {
itemName : '',
SKU : '',
Size : '',
TotalAmountPaid : '',
Sold : '',
PriceSoldFor : '',
Goat : '',
Stockx : '',
FlightClub : '',
}
this.formProductHandle = this.formProductHandle.bind(this)
}
formProductHandle = () => {
}
render() {
return (
<div>
Product Page Form
<form>
<input type='text' placeholder='Product Name'/>
<input type='text' placeholder='SKU'/>
<input type='text' placeholder='Size'/>
<input type='text' placeholder='Total Amount Paid'/>
<input type='text' placeholder='Sold'/>
<input type='text' placeholder='Price Sold For'/>
<input type='text' placeholder='Goat Link'/>
<input type='text' placeholder='Stockx Link'/>
</form>
</div>
)
}
}
export default AddProductForm
My React.Dom Файл для формы, которая не рендерит
import React from 'react'
import ReactDom from 'react-dom'
import AddProductForm from './addProductForm'
window.onload = () => {
console.log('Worked!')
ReactDom.render(<AddProductForm />, document.getElementById('Product-Form'))}
My Button React Component ( Это обрабатывает и открывает 2-е окно)
import React from 'react'
const electron = window.require('electron')
const path = require('path')
const BrowserWindow = electron.remote.BrowserWindow
class OpenAddProductPage extends React.Component{
constructor(){
super()
this.state = {
}
this.addProductHandle = this.addProductHandle.bind(this)
}
addProductHandle = () => {
let modalPath = path.join('file://',__dirname, '../public/addProduct.html')
console.log(modalPath)
let win = new BrowserWindow({width:400, height:200})
win.on('close', () => { win = null })
win.loadFile(modalPath)
//win.loadFile('./public/addProduct.html')
win.show()
}
render() {
return (
<div>
<button className='Add-Buttons' onClick={this.addProductHandle}>Add Product</button>
<button className='Add-Buttons' >Delete Product</button>
</div>
)
}
}
export default OpenAddProductPage