react-rails gem不呈現React組件包含子組件

Question

我使用React.js，我想通過使用反應軌道的ruby gem來進行服務器端渲染。

我用它，但是出現了問題。

不呈現子組件。

例如

單一組件

//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文件，在頁面加載時調用上面的腳本。 這會導致所有組件在Web頁面上都可用，因此對其他組件的任何引用都應該起作用。 以下是react-rails 文檔的摘錄：

您還可以使用UJS從<％= react_component（...）％>標記裝載和卸載組件：

//在頁面上掛載所有組件：ReactRailsUJS.mountComponents（）//在選擇器中掛載組件：ReactRailsUJS.mountComponents（“。my-class”）//在特定節點中掛載組件：ReactRailsUJS.mountComponents（specificDOMnode）

// Unmounting以相同的方式工作：ReactRailsUJS.unmountComponents（）ReactRailsUJS.unmountComponents（“。my-class”）ReactRailsUJS.unmountComponents（specificDOMnode）

當AJAX調用或模態窗口修改DOM時，您可以使用此方法。