Question

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

为了测试它是否是我的计算机，我创建了另一个rails应用程序，在我的root中创建了一个具有完全相同格式的react组件，

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

它出现在屏幕上。我的控制台绝对没有错误，所以我不知道问题是什么。两个rails应用程序（可见和不可见）之间的区别在于，破坏的应用程序正在使用设计，引导程序，并且具有更多迁移/模型/控制器。此外，我删除了破碎的涡轮锁，但即使将其添加回来，也没有什么区别。

Answer 1

我面临着同样的问题。使用react-rails宝石。

没有控制台错误，webpacker编译成功。助手也工作得很好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事件触发时，将呈现组件。因此，组件是由客户端渲染的。

无论如何，阅读发现的prerender documentation

prerender：true，以在服务器上呈现组件。

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

反应组件呈现但在Rails应用程序

1 个答案: