0

我正在处理一个电子浏览器窗口，它应该呈现一个填充了一些反应组件的 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];
4

1 回答 1

0

您需要导入 React 的 Javascript 包，React 通过命令行执行此操作react-scripts start（并且未在 index.html 文件中明确定义）。

例如

<script src="/static/js/bundle.js"></script>
<script src="/static/js/0.chunk.js"></script>
<script src="/static/js/main.chunk.js"></script>

是功能 index.html React 页面上的导入。

于 2021-03-06T15:38:09.580 回答