反应不渲染组件

Question

I am dealing with an electron BrowserWindow that should render an HTML file filled with some react components.我正在处理一个 electron BrowserWindow，它应该呈现一个 HTML 文件，其中填充了一些反应组件。 However the React components are not showing.但是没有显示 React 组件。

I have an html file which is:我有一个 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>

My script source file "../js/index.js" contains some easy React rendering:我的脚本源文件“../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'))

Where QAWindow is: 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 />
    </>
  )
}

If I change the above file to only export a simple element it doesn't work anyways.如果我将上面的文件更改为只导出一个简单的元素，它无论如何都不起作用。 So I assume that the problem is not in QAWindow.所以我认为问题不在 QAWindow 中。

These files are copied in the build/ folder, and there, the reference '../js/index.js' is still valid (the structure of the files dosn't change).这些文件被复制到 build/ 文件夹中，并且在那里，引用 '../js/index.js' 仍然有效（文件的结构不会改变）。 ../js/index.js got compiled by web-pack using a babel-loader. ../js/index.js 由 web-pack 使用 babel-loader 编译。

Why does this render a white page???为什么这会呈现一个白页？？？

EDIT:编辑：

To better debug this, I am also providing my webpack.config.js:为了更好地调试这个，我还提供了我的 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];

Answer 1

You need to import React's Javascript bundles, which React does through the command line react-scripts start (and isn't explicitly defined in the index.html file).您需要导入 React 的 Javascript 包，React 通过命令行react-scripts start执行此操作（并且未在 index.html 文件中明确定义）。

eg例如

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

are imports on functioning index.html React pages.是功能索引上的导入。html React 页面。

反应不渲染组件

问题描述

1 个解决方案

解决方案1
0 2021-03-06 15:38:09

反应不渲染组件

问题描述

1 个解决方案

解决方案1 0 2021-03-06 15:38:09

解决方案1
0 2021-03-06 15:38:09