Сам реактивный рельс не отображается. Компонент React содержит дочерние компоненты.

Question

Я использую React.js и хочу выполнять рендеринг на стороне сервера, используя ruby ​​gem, который является response-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-файл, который будет вызывать скрипт выше при загрузке страницы. Это приводит к тому, что все компоненты становятся доступными на веб-странице, поэтому любые ссылки на другие компоненты должны работать. Вот выдержка из документов по реактивным рельсам:

Вы также можете монтировать и размонтировать компоненты из тегов <% =act_component (...)%>, используя UJS:

// Монтируем все компоненты на странице: ReactRailsUJS.mountComponents() // Монтируем компоненты в селекторе: ReactRailsUJS.mountComponents(". My-class") // Монтируем компоненты в конкретном узле: ReactRailsUJS.mountComponents (specificDOMnode)

// Размонтирование работает так же: ReactRailsUJS.unmountComponents() ReactRailsUJS.unmountComponents(". My-class") ReactRailsUJS.unmountComponents(specificDOMnode)

Вы можете использовать это, когда DOM изменяется вызовами AJAX или модальными окнами.