Rails 7中React组件无法在视图中渲染的问题

问题的核心是DOM元素ID大小写敏感：你的视图文件views/home/index.html.erb里的节点是<div id="Welcome"></div>（首字母大写W），但React组件代码中使用的是document.getElementById('welcome')（全小写w），导致无法找到目标节点渲染组件。

修复步骤 #

• 修改视图文件中的ID为全小写，保持和JS代码一致：

  <div id="welcome"></div>
  

• 或者，修改React代码中的ID匹配视图的大写形式：

  document.addEventListener('DOMContentLoaded', () => {
      ReactDOM.render(<Welcome />, document.getElementById('Welcome'))
  })
  

验证其他配置（当前已正常） #

确认以下配置无问题：

• application.js已正确引入React入口文件./react/src/index.js
• index.js已导入Welcome组件
• 路由已正确设置根路径指向home#index

完整代码参考 #

Welcome组件代码（./react/src/components/Welcome.js） #

import * as React from 'react'
import * as ReactDOM from 'react-dom'

const Welcome = () => {
    return(
        <div className="container">
            <h1>Hello World! Welcome to the Rails 7 Course with React JS</h1>
        </div>
    )
}

document.addEventListener('DOMContentLoaded', () => {
    // 这里的ID要和视图中的ID完全匹配（包括大小写）
    ReactDOM.render(<Welcome />, document.getElementById('welcome'))
})

export default Welcome

index.js代码（./react/src/index.js） #

import Welcome from './components/Welcome'

application.js代码 #

// // Entry point for the build script in your package.json
// import "@hotwired/turbo-rails"
// import "./controllers"
import './react/src/index.js'
import * as bootstrap from "bootstrap"

路由代码（config/routes.rb） #

Rails.application.routes.draw do
  # get 'home/index'
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  root "home#index"
end

内容的提问来源于stack exchange，提问作者Benjamin