javascript - React-rails gem 不渲染 React 组件包含子组件

Question

我使用 React.js，我想使用 ruby​​ gem(即 React-rails)进行服务器端渲染。

我使用了它，但是出现了问题。

子组件未渲染。

例如

单个组件

//javascript
class Hoge extends React.Component{
  render(){
    return(
      <div>component</div>
    )
  }
}

//html
<%= react_component('Hoge', {}, {prerender: true}) %>

没关系。已渲染。

一个组件包含子组件。(同一个文件)

//javascript
class Fuga extends React.Component{
  render(){
    return(<div>Child Component</div>)
  }
}

class Hoge extends React.Component{
  render(){
    return(<Fuga />)
  }
}

//html
<%= react_component('Hoge', {}, {prerender: true}) %>

没关系。已渲染。

一个组件包含子组件(不同文件)

//Fuga.js
class Fuga extends React.Component{
  render(){
    return(
      <div>Child Component</div>
    )
  }
}

// Hoge.js.jsx

import Fuga from './Fuga.js.jsx'
// or var Fuga = require('./Fuga.js.jsx')

class Hoge extends React.Component{
  render(){
    return(
      <Fuga />
    )
  }
}

// html
<%= react_component('Hoge', {}, {prerender: true}) %>

这很糟糕。发生错误。

// rails error
ActionView::Template::Error (ReferenceError: unknown: console is not defined):

请告诉我为什么会发生该错误。

感谢您对我蹩脚的英语的耐心!

Answer 1

我通过调用让它工作 ReactRailsUJS.mountComponents() 在网页上。创建一个 JS 文件，该文件将在页面加载时调用上面的脚本。这会导致所有组件在网页上变得可用，因此对其他组件的任何引用都应该有效。 这是react-rails docs 的摘录:

You can also mount & unmount components from <%= react_component(...) %> tags using UJS:

// Mount all components on the page: ReactRailsUJS.mountComponents() // Mount components within a selector: ReactRailsUJS.mountComponents(".my-class") // Mount components within a specific node: ReactRailsUJS.mountComponents(specificDOMnode)

// Unmounting works the same way: ReactRailsUJS.unmountComponents() ReactRailsUJS.unmountComponents(".my-class") ReactRailsUJS.unmountComponents(specificDOMnode)

You can use this when the DOM is modified by AJAX calls or modal windows.