我已经添加react-rails到我们正在慢慢迁移以做出反应的现有项目中。

当前的 webpacker.yml

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
    - .tsx
    - .ts

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/ …

我正在使用react-rails gem来集成与rails的反应,我对如何组织我的代码感到矛盾.

我最好在html.erb文件或jsx文件中包含我的核心html 吗？目前,我基本上把一切都变成了一个组件 我在我的html.erb文件中所做的就是使用react_component帮助程序来调用这些组件.例如,ProfileShow.js.jsx我的个人资料页面有一个文件EditPost.js.jsx,我的编辑帖子页面有一个文件.

你的建议是什么？

我正在使用react-rails gem,我正在尝试在ES6中编写一些看起来像这样的组件.

我的link_list.js.jsx文件

import Component from 'react';
import Links from 'link';

class LinkList extends React.component{
  constructor(props){
    super(props);
    this.sate = {};
  }

  getInitialState(){
    return { links: this.props.initialLinks}
  }


  render(){
    var links = this.state.links.map(function(link){
      return <Links key={link.id} link={link} />
    })

    return (
      <div className="links">
        {links}
      </div>
    )
  } 
}

我一直得到这个Uncaught ReferenceError: require is not defined 和一个错误说Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass …

我正在尝试根据此资源创建一个d3饼图.

但是,我收到以下错误:

未捕获的类型错误 - 无法读取未定义的属性"饼"

我的代码:

class PieChart extends React.Component {
constructor() {
    super();

// - This is where the error is occuring!

    this.pie = d3.layout.pie().value((d) => d.value);
    this.colors = d3.scale.category10();

}

arcGenerator(d, i) {
    return (
        <LabeledArc key = {`arc-${i}`}
                    data = {d}
                    innerRadius = {this.props.innerRadius}
                    outerRadius = { this.props.outerRadius }
                    color = {this.colors(i)} />
    );

}

render() {

    console.log('Render Method Fires');
    let pie = this.pie(this.props.data),
        translate = `translate(${this.props.x}, ${this.props.y})`;

    return (
             <g transform={translate}>
                {pie.map((d, i) => …

我用 webpacker 创建了示例项目 react-rails。但显示错误“未捕获的引用错误：未定义人员”。帮助我 如何在 webpacker 中使用 react-rails？我进行的处理如下。

Rails 版本

$ rails -v
Rails 5.0.2

宝石版

react-rails (2.1.0)
webpacker (1.1)

创建 Rails 项目

$ rails new example

将 webpacker 和 react-rails 添加到 Gemfile

gem 'webpacker', github: 'rails/webpacker'
gem "react-rails"

安装 webpacker 并做出反应

$ rails webpacker:install
$ rails webpacker:install:react
$ rails generate react:install

创建控制器

$ bin/rails g controller home

添加路线

config/routes.rb
root "home#index"

添加反应组件

$ bin/rails g react:component person name --es6

添加 react_component 标签

app/views/home/index.html.erb
<%= react_component("Person", { name: "Hello" }) …

我正在尝试将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'; …

我想从我的选择选项列表中获取属性.

同时我的代码如下:

var Billing = React.createClass({
    getInitialState() {
    return {
        associations: [],
        value: '',
        associationsList: '1'
    };
  },
   handleChange(event) {  
    this.setState({value: event.target.value});
  },
  handleOption(event){
    var option =  event.target.getAttribute('data-id');
    this.setState({associationsList: option});
  },
  render() {
    var listAssociations = this.state.associations.map(function(index){
        return (
            <option onChange={this.handleOption} value={index.name} data-id={index.id} ref={index.name} key={index.id}>{index.name}</option>
        )
    });

    var BillingInfo
    {
      if(this.state.associationsList == "0")
      {
        return (   
        <div>
        <Tabs selected={0}>
          <Pane label="Billing Info">
            <div className="row">
                <div className="small-12">
                    Associations:
                    <select value={this.state.value} onChange={this.handleChange}>
                    {listAssociations}
                    </select>
                </div>
            </div>
            <div>
            {this.state.value}<br/>
            {this.state.associationsList}
            Basic package
            </div> …

我正在使用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 加载程序。

在此输入图像描述

我之前运行过

rails generate controller Welcome index

在终端上运行命令并直接运行服务器，但不断出现此错误消息：

没有交互式请求的模板
WelcomeController#index 缺少请求格式的模板：text/html

我尝试寻找解决方案，但没有一个能解决问题。

这些是文件路径

里面只包含：

你好，铁轨！

我正在使用react_component我的Rails项目.这会为react.js组件插入包装div ,例如

<div data-react-class="ButtonSwitchToTab" data-react-props="{...}">
  <a href="#" class="btn btn-primary btn-lg" ... data-reactid=".2">
    Add / Invite People
  </a>
</div>

我真正需要的是将样式信息插入到这个包装div中,以便组件适当地对齐,如下所示:

<div data-react-class="ButtonSwitchToTab" data-react-props="{...}"
 style="display:inline-block">  <<<<<------
  <a href="#" class="btn btn-primary btn-lg" ... data-reactid=".2">
    Add / Invite People
  </a>
</div>

适当的方法是什么？