【发布时间】：2021-06-04 22:38:23
【问题描述】：
我正在处理一个电子浏览器窗口，它应该呈现一个填充了一些反应组件的 HTML 文件。但是 React 组件没有显示出来。
我有一个 html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self'" />
</head>
<body>
<div id='QA_Dialog'></div>
<script src="../js/index.js"></script>
</body>
</html>
我的脚本源文件“../js/index.js”包含一些简单的 React 渲染：
import ReactDOM from 'react-dom';
import QAWindow from './QAWindow';
document.body.style.overflow = "hidden";
document.body.style.borderRadius = "5px";
ReactDOM.render(<QAWindow />, document.getElementById('QA_Dialog'))
QAWindow 在哪里：
import React from 'react';
import { electron } from 'webpack';
import { CloseButton, StyledButton} from '../templates/style';
const useState = React.useState
function QuestionForm() {
const [question, setQuestion] = useState()
function handleSubmit(e) {
e.preventDefault()
electron.QandA.askQuestionSignal(question);
}
function handleClose(e){
e.preventDefault()
electron.QandA.closeWindowSignal('Dio')
}
return (
<>
<CloseButton onClick={handleClose}>
<img src="../templates/close.svg" />
</CloseButton>
<form onSubmit={handleSubmit}>
<input value={question} onChange={e => setQuestion(e.target.value)} placeholder="Ask a question..." />
<span>
<StyledButton>Find Answer</StyledButton>
</span>
</form>
</>
)
}
export default function QAWindow() {
return(
<>
<QuestionForm />
</>
)
}
如果我将上述文件更改为仅导出一个简单元素，它无论如何都不起作用。所以我认为问题不在 QAWindow 中。
这些文件被复制到 build/ 文件夹中，并且在那里，引用 '../js/index.js' 仍然有效（文件的结构不会改变）。 ../js/index.js 由 web-pack 使用 babel-loader 编译。
为什么会出现白页？？？
编辑：
为了更好地调试，我还提供了我的 webpack.config.js：
// This first configuration bundles the script that renders the react components
const QandAExtension= {
mode: 'development',
entry: './src/preloads/QandA/js/index.js', // This entry point match the correct react script that needs to be bundled.
devtool: 'inline-source-map',
target: 'electron-renderer',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [[
'@babel/preset-env', {
targets: {
esmodules: true
}
}],
'@babel/preset-react']
}
}
},
{
test: [/\.s[ac]ss$/i, /\.css$/i],
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
limit: 10000,
},
},
],
}
]
},
resolve: {
extensions: ['.js'],
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'build', 'QandA', 'js'),
},
};
// This second configuration copies the folder containing the HTML file
// into the build/ folder of this app.
const preloadConfig = getConfig({
target: 'electron-renderer',
devtool: false,
watch: dev,
entry: {
'view-preload': './src/preloads/view-preload',
},
// Here in plugin you can specify what you want to copy in the build/ folder.
plugins: [
new CopyPlugin({
patterns: [
{
from: join(__dirname, "src", "preloads", "QandA", "templates"),
to: "QandA/templates",
toType: "dir",
}
],
}),
],
},);
module.exports = [preloadConfig, QandAExtension];
【问题讨论】：
-
我没有看到
React的导入，而您正在定义const useState = React.useState。也许它抛出了一个错误？您可以用import { useState } from 'react';替换该行，根据您的构建设置，您可能还需要定义 React 以获得 JSX 转换：import React, { useState } from 'react'; -
对不起，这只是我在复制粘贴代码时犯的一个错误。我刚刚编辑了 sn-p 以包含它。
标签： javascript html reactjs electron