反應不渲染組件

Question

我正在處理一個 electron BrowserWindow，它應該呈現一個 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];

Answer 1

您需要導入 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>

是功能索引上的導入。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