Question

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

应用程序/视图/ 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视图。

Answer 1

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

添加：

<%= javascript_include_tag "bundle" %>

到你的erb文件的底部。

React不在rails静态页面视图上呈现

1 个答案: