Question

我正在尝试在我的反应应用中添加第二页而不安装任何新插件或进行重大修改。

我将monsters.html添加到我的公共目录，将monsters.js添加到index.js旁边的src。当我导航到localhost:3000/monsters.html时，我收到此错误：

SyntaxError：expected expression，got'＆lt;'[了解更多] monsters.js：1

monsters.js :,在src /右侧index.js：

import React from 'react',
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

monsters.html：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>Monsters 2</title>
  </head>
  <body>
    <div>Foo</div>
    <div id="root2"></div>
  </body>
  <script src="../src/monsters.js"></script>
</html>

monsters.html, in public

Answer 1

您不能简单地将JSX语法文件作为脚本包含在HTML中，首先必须将其转换为javascript（因此有关<语法的语法错误）。

生产解决方案

您需要重命名为monsters.jsx，并添加一些构建配置以按预期输出。

如果没有关于当前构建工具或配置的信息，我只能建议如果使用webpack构建，则需要将其添加为另一个条目文件（假设您需要为每个HTML页面单独包），请设置输出包以映射到您的输入文件，并确保您有一个JSX转换规则（注意：这将输出到/dist/index.js和/dist/monsters.js，这将是您在HTML脚本标记中指向的文件）... < / p>

var webpack = require('webpack');

module.exports ={
  entry: {
    index: './src/index.js',
    monsters: './src/monsters.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        use: {
          loader: 'babel-loader',
          exclude: /node_modules/,
          options: {
            presets: ['es2015', 'react']
          }
        }
      }
    ]
  }
};

快速而肮脏的非压倒性解决方案

或者作为一种快捷方式，这可以使用HTML文件本身中的babel独立来完成，虽然这不是构建生产反应应用程序的标准，但如果只对使用React和JSX感兴趣，它应该可以工作。下面是https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f的教程（只记得将react，react-dom和babel-standalone的版本碰到当前版本）

将第二页添加到我的React应用程序，无法读取.js文件错误

1 个答案: