ruby-on-rails - React 组件渲染但在 Rails 应用程序中不可见

Question

正如标题所说，当我运行 rails server 时，我的 react 组件都不可见。我正在使用 gem react-rails .我知道他们正在渲染，因为在检查页面的 body 标签时，它有 <div data-react-class="Home" data-react-props="{}"></div> .

为了测试它是否是我的电脑，我制作了另一个 rails 应用程序，在我的根目录中创建了一个具有完全相同格式的 react 组件，即

class Home extends React.Component {
  render() {
    return (
      <h1>Hello</h1>
    )
  }
}

它出现在屏幕上。我的控制台中绝对没有错误，所以我不知道问题是什么。两个 Rails 应用程序(可见和不可见)之间的区别在于，损坏的应用程序使用了设计、 bootstrap ，并且具有更多的迁移/模型/ Controller 。此外，我删除了损坏的涡轮链接，但即使将其重新添加，也没有任何区别。

Answer 1

我面临同样的问题。使用 react-rails gem 。

没有控制台错误，webpacker 编译成功。 helper 也工作得很好react_component('Home')因为我可以在 html 中看到

<div data-react-class="Home" data-react-props="{}"></div>

安装 gem 时，以下示例位于:

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> 
// to the head of your layout file,
// like app/views/layouts/application.html.erb. 

// All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})

效果很好。

但是组件在 DOMContentLoaded 时被渲染事件触发。所以组件是由客户端渲染的。

无论如何，阅读 documentation找到 prerender

prerender: true to render the component on the server.

所以使用 =react_component("Home", {}, {prerender: true})对我有用。