标签: react-on-rails

我们在Rails应用程序中使用React on Rails.部署时,资产预编译需要大约20分钟.

根据部署日志,似乎大部分时间花在预编译3.3MB javascript文件上.该文件"app.js"连接由webpack生成的两个文件:

# app.js

//= require vendor-bundle (250KB)
//= require app-bundle  (3.3MB)

考虑到app-bundle的大小,我们是否应该期待很长的预编译时间？或者,我们能改进吗？

作为补充说明,我们尝试直接编译app-bundle,而不是通过app.js要求它,并且花费了相同的时间.

更新:

我们最终将客户端代码分解为一个单独的create-react-app项目,该项目通过API连接到我们的Rails应用程序.我们的devops和部署管道的复杂性大大降低 - 没有真正深入挖掘这个错误.

我是一个React新手试图将React集成到Rails站点.我CommentForm在页面/ html的最顶部有一个组件Comments,在同一页面的底部有一个组件.目前,两者都是通过React-On-Rails的react_component方法呈现的.

问题是,一旦在提交表单CommentForm,我想改变this.state.comments的Comments部分.我很熟悉确保将状态冒泡到一个共同的父组件的想法,但是目前,这两个组件没有共同的父组件(或任何父组件).

所以,由于免责声明我一直在学习React 2天而且很可能很困惑,克服这类问题的最佳做法是什么？我看到的选项:

• 将整个rails视图重写为单个父组件,其中两个组件为下面的子组件.这听起来并不好玩 - 页面上两个组件之间的很多rails助手都会产生很多html
• 使用Redux创建一个在两个组件之间共享的存储(???)
• 以某种方式创建父组件,同时仍然在页面的不同部分呈现其他两个组件(？)
• Comment从内部CommentForm或某些共享资源(例如:window范围)访问的状态属性,根据我的有限理解,它不是React Way

我猜这是一个常见问题,但我不确定解决它的一般智慧是什么.任何想法都赞赏.

我试图将渲染函数中的值传递给组件:

= react_component('App', props: {test: 'abc'}, prerender: false)

Routes.jsx

<Route path="/" component={App} >

App.jsx(组件)

class App extends React.Component {
  render() {
    return (
      <Header test={this.props.test}>
      </Header>
      {this.props.children}
      <Footer />
    );
  }
}

App.propTypes = { test: PropTypes.string };

这个完整的流程似乎没有一致的答案.

我尝试过以下方法:

<Route path="/" component={() => (<App myProp="value" />)}/>

但这仍然无法回答初始渲染调用提供的值(react_component)

考虑一下这段代码snnipet:

<%= form_for @survey do |f| %>
  <%= f.error_messages %>
 <p>
   <%= f.label :name %><br />
   <%= f.text_field :name %>
 </p>
  <%= f.fields_for :questions do |builder| %>
    <%= render "question_fields", :f => builder %>
  <% end %>
 <p><%= f.submit "Submit" %></p>
<% end %>

它会返回我有一些哈希(rails dev会知道).我的问题是如何在ReactJS中制作这种格式？接收与Rails默认完全相同的参数.至于现在,我只能在JSX中使用HTML标签.目前我在控制器中接收params并根据需要对它们进行排序(这看起来很糟糕).我已经测试了一些npm软件包,但是他们的文档似乎没有帮助!其中包括:https: //www.npmjs.com/package/react-rails-form-helpers

https://www.npmjs.com/package/react-form

这有什么npm包吗？使用react_on_rails gem和Rails 5稳定

我的Rails应用程序中的一个语言环境文件可以正常使用Rails,但是当我尝试将它与react_on_rails一起使用时rake task(rake react_on_rails:locale)我收到此错误:

Psych::BadAlias: Unknown alias: item_attributes

我发现rake任务基本上是调用YAML.safe_load,所以我准备了没有Rails的最简单的例子,错误仍然存​​在.这是示例Ruby脚本:

require 'yaml'

YAML.safe_load(File.open('test.yml'))

这是test.yml文件(实际语言环境文件的较短版本):

pl:
  language: Polski
  dictionary_name: simple
  activerecord:
    attributes:
      line_item: &item_attributes
        variant: Produkt
        quantity: Ilosc
        price: Cena Netto
        total_price: Wartosc Netto
        vat_rate: VAT
        total_vat_amount: Kwota VAT
        total_gross_price: Wartosc Brutto
      order_item:
        <<: *item_attributes

我仍然收到错误:

/usr/local/Cellar/ruby/2.3.1/lib/ruby/2.3.0/psych/visitors/to_ruby.rb:402:in `visit_Psych_Nodes_Alias': Unknown alias: item_attributes (Psych::BadAlias)

任何想法为什么这与Rails工作正常但在这里失败？是否有其他方法可以避免YAML文件中的重复并使其适用于Rails和YAML.safe_load？

我在带有 Hooks 前端的 React 上使用 axios 来发出获取请求，以使用 Rails 后端中的种子数据填充我的 react-google-maps/api GoogleMaps Marker 组件。当我让 rails 服务器运行时，服务器会反复进行此调用。

以下行导致在axios.get循环中调用 ：

 React.useEffect(() => {
        // Get Coordinates from api
        // Update Coordinates in state
        axios.get('/api/v1/coordinates.json')
        .then(response => response.data.data.map(coord => 
              setCoordinateFromApi(coord.attributes)))
        .catch(error => console.log(error))
    }, [coordinates.length]) 

这成功地填充了地图，但意味着我不能使用 ```onClick`s`` 功能（因为我认为这个请求正在堆栈顶部？）

我在 Rails 中的 CoordinatesController 上的索引方法：

def index
  coordinates = Coordinate.all
  render json: CoordinateSerializer.new(coordinates).serialized_json
end

注意：这是我第一个将 React 链接到 Rails 以及使用 Hooks 的项目

yarn install v0.21.3
[1/4] Resolving packages...
warning There appears to be trouble with your network connection. Retrying...
warning There appears to be trouble with your network connection. Retrying...
warning There appears to be trouble with your network connection. Retrying...
warning There appears to be trouble with your network connection. Retrying...
warning There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://github.com/igorklopov/node-resolve.git: tunneling socket could not be established, cause=write EPROTO 140399640340352:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:794:\n".

首先我认为这可能是代理问题所以我添加了我的公司代理设置:

yarn …

我正在尝试将react- slick 滑块集成到我的ReactJS应用程序中.

当我将它集成到一个新的演示应用程序时,它按预期工作,但如果我将它集成到我自己的应用程序中,则会抛出错误.我使用rails作为后端.

当我尝试在组件中导入滑块时

 var Slider = require('react-slick'); 

它告诉我一个错误.

错误日志(在rails中)是

| ExecJS::ProgramError - TypeError: Cannot read property 'userAgent' of undefined:|   execjs (2.7.0) 
lib/execjs/ruby_racer_runtime.rb:98:in `wrap_error'|   execjs (2.7.0) 
lib/execjs/ruby_racer_runtime.rb:15:in `rescue in block in initialize'|   execjs (2.7.0) 
lib/execjs/ruby_racer_runtime.rb:12:in `block in initialize' |   execjs (2.7.0) 
lib/execjs/ruby_racer_runtime.rb:75:in `block in lock'|   execjs (2.7.0) 
lib/execjs/ruby_racer_runtime.rb:73:in `lock'|   execjs (2.7.0) 
lib/execjs/ruby_racer_runtime.rb:9:in `initialize'|   execjs (2.7.0) 

编辑

我的代码中的其他地方我已经在代码下面写了它并且工作正常

'use strict';

var React = require('react');
import logo from 'img/spark-logo.jpg'
var Carousel = require('nuka-carousel');
//import { NukaDecorate } from 'nuka-carousel-autoscroll'; …

我使用 React on Rails 创建了一个站点。它工作得很好，但我没有注意到服务器端渲染被关闭，我需要它来进行 SEO，所以我决定打开它。问题是现在我收到这样的错误：

ERROR in SERVER PRERENDERING
Encountered error: "ReferenceError: window is not defined"

我的webpack.config.js看起来像这样：

/* eslint comma-dangle: ["error",
  {"functions": "never", "arrays": "only-multiline", "objects":
"only-multiline"} ] */

const webpack = require('webpack');
const path = require('path');

const devBuild = process.env.NODE_ENV !== 'production';
const nodeEnv = devBuild ? 'development' : 'production';

const bundles = [
    './app/bundles/Home/startup/registration'
]

const config = {
  entry: [
    'es5-shim/es5-shim',
    'es5-shim/es5-sham',
    'babel-polyfill',
    ...bundles
  ],

  output: {
    filename: 'webpack-bundle.js',
    path: '../app/assets/webpack',
  },

  resolve: { …

我想延迟加载所有顶级组件以缩短加载时间。我正在使用React-on-rails来集成 React 和 Ruby on Rails。要渲染组件，我必须像这样注册它们registration.jsx：

import ReactOnRails from 'react-on-rails';
import Component1 from '../components/Component1';
import Component2 from '../components/Component2';

ReactOnRails.register({Component1, Component2});

我尝试了两种方法：

1.React.lazy：

import {lazy} from "react";
const Component1 = lazy(() => import("../components/Component1"));

但浏览器抛出错误...

Uncaught Error: Module build failed: SyntaxError: 
.../app/registration.jsx: Unexpected token, expected ";" (20:113)

看来我不能在这个文件中使用延迟加载。所以我在 Component1 中的子组件中尝试了它。但它仍然不起作用。

 const SubComponent = lazy(() => import("./SubComponent"));

这将返回：

Uncaught ReferenceError: SubComponent is not defined

2. 反应可加载：

官方文档

这似乎是推荐的react-on-rails（见下文），但我收到了一个不同的错误，说react-on-rails找不到这样的组件。

import ReactOnRails from 'react-on-rails';
import Loadable from "react-loadable";

const …

我正在使用web-packer和React-rails gem 来构建一个在线旅行应用程序。我在 JSX 视图中使用 Rails URL 助手和服务器端渲染时遇到问题：

例如在我的 jsx 视图中：

#project/app/javascript/packs/app/components/front_end/SearchTripItemComp.erb
<%= link_to "Book Now!", search_trips_path, className: 'btn btn-book' %>

运行后我得到这个错误：

我能想到的解决方法是将 search_trips_path 作为 props 从 Rails 视图传递给组件，或者直接使用 Rails.application.routes.url_helpers ，但这非常不方便，特别是对于那些具有许多链接的 jsx 视图。

我尝试查看 web-packer 文档，但似乎 gem 不支持 erb 加载器的 Rails 视图助手。

请各位帮忙指点一下！

ps：我已经正确配置了 erb webpacker 加载程序。