Реактивный компонент не рендерится при использовании самоотверждающегося рельса - PullRequest
Новая
       49

Реактивный компонент не рендерится при использовании самоотверждающегося рельса

1 голос
/ 06 марта 2019

Я следовал «Начать работу с веб-упаковщиком» в act-rails , но при запуске сервера rails я не вижу там компонента hello world.

приложение / JavaScript / компоненты / helloworld.js 

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

вид / макет / application.html.erb 

<!DOCTYPE html>
<html>
  <head>
    <title>MyApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

вид / дом / index.html.erb 

<!DOCTYPE html>
    <html>
        <body>
            <p>Heloo</p>
            <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
        </body>
    </html>

приложение / JavaScript / пакеты / application.js 

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

console.log('Hello World from Webpacker')
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)

Это то, что я получаю, когда пытаюсь получить доступ к веб-странице. react-rails webpage

EDIT: Добавление prerender: true (рендеринг на стороне сервера), он отлично работает 

<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }, prerender: true) %>

но почему не работает рендеринг на стороне клиента?

1 Ответ

0 голосов
/ 12 мая 2019

Эта проблема связана с настройкой вашего вида.

Ваше представление отображает полный HTML-документ и игнорирует макет, поэтому JavaScript вообще не загружается на странице. Это объясняет, почему все будет неопределенным в окне.

На скриншоте в вопросе вы можете видеть, что HTML-заголовок пуст. Замените вид следующим.

вид / дом / index.html.erb 

<p>Heloo</p>
<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>

Также убедитесь, что ваш файл макета отображается правильно, временно поместив в него что-то видимое. Вы можете временно поместить содержимое просмотра в шаблон, чтобы обеспечить обе вещи одновременно!

Надеюсь, это поможет.

...