ruby-on-rails - 反应不在 Rails 静态页面视图上呈现

Question

所以在 View 中，Rails static_pages root.html.erb 显示在http://localhost:3000/

app/view/static_pages/root.html.erb

<main id="root"></main>
<h1> from root.html.erb file </h1>

应用程序/前端/waitlist.jsx

import React from 'react';
import ReactDOM from 'react-dom';

document.addEventListener('DOMContentLoaded', () => {
  const root = document.getElementById('root');

  ReactDOM.render(<h1>react render</h1>, root);
});

webpack.config.js

    var path = require("path");

module.exports = {
  context: __dirname,
  entry: "./frontend/waitlist.jsx",
  output: {
    path: path.resolve(__dirname, 'app', 'assets', 'javascripts'),
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: [/\.jsx?$/, /\.js?$/],
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['env', 'react']
        }
      }
    ]
  },
  devtool: 'source-map',
  resolve: {
    extensions: [".js", ".jsx", "*"]
  }
};

不确定为什么 waitlist.jsx 部分不起作用，没有显示错误。刚刚运行 rails 服务器，只看到没有 reactDOM 的 rails 视图。

标签： ruby-on-railsreactjsreact-dom

Answer 1

看起来您的 erb 文件缺少对 bundle.js 文件的引用。

添加：

<%= javascript_include_tag "bundle" %>

到您的 erb 文件的底部。