标签: react-rails

基本React错误示例:Uncaught TypeError:undefined不是函数

我正在尝试将反应连接到我的应用程序中.它是一个使用rails-rails的rails应用程序(虽然我不认为这是问题的一部分).我目前正在使用一个非常简单的1组件设置:

// react_admin.js.jsx

/** @jsx React.DOM */
var CommentBox = React.createClass({
  render: function() {
    return (
     <div className="commentBox">
       Hello, world! I am a CommentBox.
      </div>
   );
  }
});

React.render(
  <CommentBox />,
  document.getElementById('content')
);

Run Code Online (Sandbox Code Playgroud)

我的html文件包含:

<body>
  <div id="content"></div>
  <script src="/assets/react.js?body=1"></script>
  <script src="/assets/react_admin.js?body=1"></script>
</body>

Run Code Online (Sandbox Code Playgroud)

我可以看到rails-react将我的react_admin.js.jsx转换为react_admin.js,如下所示:

/** @jsx React.DOM */

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.DOM.div({className: "commentBox"}, 
        "Hello, world! I am a CommentBox."
      )
    );
  }
});

React.render(
  CommentBox(null),
  document.getElementById('content')
);

Run Code Online (Sandbox Code Playgroud)

然而,chrome在Render.react()调用中引发了''Uncaught TypeError:undefined不是函数',它在"("和"CommentBox(null)"之间显示)

有人能告诉我我做错了什么吗？

javascript reactjs react-jsx react-rails

Lau*_*ung

2015 08-07

32
推荐指数

3
解决办法

5万
查看次数

React on Rails集成

我正在寻找使用gem react-rails实现ReactJS作为我的Rails应用程序的视图.到目前为止,我只使用标准.erb在我的RoR应用程序中呈现我的视图,我想知道如何使用React做一些问题.

例如,当您想在RoR中为模型创建表单时,您只需使用以下命令创建表单:

<%= form_for(@product) do |f| %>
  <%= f.text_field :name %>
  ...
  <%= f.submit %>
<% end %>

Run Code Online (Sandbox Code Playgroud)

而这个自动使用正确的路线,产生CSRF令牌,使用正确的CSS id和class等...

现在,如果我使用React,我必须照顾所有这些吗？并以老式的方式在渲染中创建JSX中的表单？

# My view .html.erb
<%= react_component 'Form', {} %>

# My js.jsx file
var Form = React.createClass({
render: function () {
  return (
    <form className="new_my_model" onSubmit={this.handleSubmit}>
      <input style={inputStyle} type="text" className="my_model_name" />
      ...
      <input type="submit" value="Post" />
    </form>
  );
}
});

Run Code Online (Sandbox Code Playgroud)

没有像Ruby for React这样的"自动生成功能"？

我已经发现了一些ressources网上关于教程阵营与铁轨(1,2,3),但大多数时候,他们说不同的东西.有些人使用JSX,一些咖啡,而官方的React网站建议使用JSX …

javascript ruby-on-rails reactjs react-rails

Sté*_*ane

2016 09-25

9
推荐指数

1
解决办法

2921
查看次数

如何从Rails视图调用内部API(用于ReactJS预呈现目的)？

我已经有Rails API控制器返回JSON响应.它由前端Javascript(以及移动应用程序)用于呈现值.

现在,我希望使用ReactJS预呈现这些值:

#app/controllers/api/v1/products_controller.rb
module API
    module V1
        class ProductsController < ApplicationController
            def index
                @products = Product.all #this could  be acomplex multi-line statements. 
                #rendered in api/v1/products/index.json.jbuilder
            end
        end
    end
end

#app/controllers/products_controller.rb
class ProductsController < ApplicationController
    def index
        #How to do this efficiently?
        @products_json = #Call to internal /api/v1/products/index for prerender purpose.
        @user_json = #Call to internal /api/v1/user/show for prerender purpose.
    end
end

#app/views/products/index.html.erb
<%= react_component('ProductsList', @products_json, {prerender: true}) %>
<%= react_component('UserProfile', @user_json, {prerender: true}) %>

Run Code Online (Sandbox Code Playgroud)

如何有效地调用内部/api/v1/products和/api/v1/userURL(例如,不向我自己的服务器发出HTTP …

javascript ruby-on-rails reactjs react-rails

Pah*_*iya

2015 09-29

7
推荐指数

1
解决办法

1125
查看次数

使用'material-ui'和react-rails gem？

我想在我的Rails 4应用程序中使用material-ui组件库.我目前正在使用react-rails gem将.jsx编译添加到资产管道.我在gemfile中通过rails-assets添加了material-ui,如下所示:

source 'https://rails-assets.org' do
  gem 'rails-assets-material-ui'
end

Run Code Online (Sandbox Code Playgroud)

我在我的application.js文件中需要这样的库:

//= require material-ui

Run Code Online (Sandbox Code Playgroud)

但是我不断收到错误"找不到文件'材料-ui".如何使用react-rails gem在我的Rails应用程序中使用material-ui组件库？

ruby-on-rails asset-pipeline reactjs react-jsx react-rails

Cu1*_*ure

2016 01-30

7
推荐指数

1
解决办法

3213
查看次数

如何从ReactJS中的onClick函数调用另一个组件

我正在学习Reactjs.我用rails实现了一个示例反应应用程序.我已经搜索了很多找到解决方案,但我没有找到任何解决方案.我想从onClick函数中调用另一个组件.但什么都没发生.这可能是我试图实现的吗？如果是,那么请指出我错误的地方,如果没有,那么我可以实施哪种方式.这是我的代码:

var Comment = React.createClass({
  render: function () {
    return (
      <div id={"comment_"+ this.props.id }>
        <h4>{ this.props.author } said:</h4>
        <p>{ this.props.desc }</p>
        <a href='' onClick={this.handleDelete}>Delete</a> | #this is for delete which works great
        <a href='' onClick={this.handleEdit}>Edit</a> 
         # If I put here then it works fine <UpdateComments comments={ this.props} /> but I don't want it here
      </div>
    )
  },
  handleDelete: function(event) {
    $.ajax({
      url: '/comments/'+ this.props.id,
      type: "DELETE",
      dataType: "json",
      success: function (data) {
       this.setState({ comments: data });
      }.bind(this) …

Run Code Online (Sandbox Code Playgroud)

javascript ruby-on-rails reactjs react-rails

Het*_*nti

2015 04-28

6
推荐指数

1
解决办法

1万
查看次数

(Jade或Slim)类似于React的语法？

我已经习惯了使用slim和jade,我最近开始使用React在前端编写应用程序,并发现现在我在组件内部再次编写臃肿的HTML.我目前正在使用带有babel等的Ruby on Rails和.jsx文件:

gem 'react-rails', '~> 1.4.0'
gem 'react-router-rails', '~>0.13.3.2'

Run Code Online (Sandbox Code Playgroud)

但我也在使用React和节点并使用react-starterify样板表达,这与Node的故事相同.

有什么东西可以让我开始使用像slim或Jade这样的语法在React中编写我的html吗？

slim-lang reactjs react-rails pug

作者

lucky-day

6
推荐指数

1
解决办法

2728
查看次数

警告:input是一个void元素标记,不能有`children`或使用`props.dangerouslySetInnerHTML`.检查render方法为null

如果对表单URL的ajax调用失败,我试图在表单中呈现错误.以下是我的Admin组件:

#app/assets/javascripts/components/admin.js.coffee
@Admin = React.createClass
#  propTypes: ->
#    emailVal: React.PropTypes.string.isRequired

  getInitialState: ->
    edit: false
    errorTexts: []

  handleToggle: (e) ->
    e.preventDefault()
    @setState edit: !@state.edit
    @setState errorTexts: []

  handleDelete: (e) ->
    e.preventDefault()
    # yeah... jQuery doesn't have a $.delete shortcut method
    $.ajax
      method: 'DELETE'
      url: "/admins/#{ @props.admin.id }"
      dataType: 'JSON'
      success: () =>
        @props.handleDeleteAdmin @props.admins

  handleEdit: (e) ->
    e.preventDefault()
    data = email: ReactDOM.findDOMNode(@refs.email).value
    # jQuery doesn't have a $.put shortcut method either
    $.ajax
      method: 'PUT'
      async: false
      url: "/admins/#{ …

Run Code Online (Sandbox Code Playgroud)

coffeescript ruby-on-rails-4 react-rails

vip*_*169

2016 03-14

6
推荐指数

1
解决办法

1万
查看次数

如何在Rails中使用npm软件包

我试图在我的Ruby on Rails应用程序中使用Ace编辑器，并且大部分视图构成为React组件。我使用的是react-rails宝石，根本不使用助焊剂。

我找到了此react-ace软件包，但必须使用npm进行安装。我已经能够使Bower组件与bower-rails gem一起工作，但从未使用过npm软件包。有没有办法仅通过资产管道（通过供应商）使用此方法？

顺便说一句，我没有使用browserify或ES6，所以我什至没有import。到目前为止，我一直在通过资产管道进行所有操作。

谢谢！

ruby-on-rails npm ace-editor reactjs react-rails

Nov*_*ice

2016 04-14

6
推荐指数

2
解决办法

5853
查看次数

React Rails 与 Webpacker 不热重载

我已经添加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/ …

Run Code Online (Sandbox Code Playgroud)

ruby-on-rails react-rails webpack-dev-server hot-module-replacement webpacker

Mat*_*ady

2019 02-21

6
推荐指数

1
解决办法

4275
查看次数

尝试在我的react-rails项目中执行yarn时出现“无效值类型”错误

我正进入（状态：

error An unexpected error occurred: "Invalid value type 2:0 in /Users/myname/Desktop/work2/reservations_fully_paid/Foggle/yarn.lock".
info If you think this is a bug, please open a bug report with the information provided in "/Users/myname/Desktop/work2/reservations_fully_paid/Foggle/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Run Code Online (Sandbox Code Playgroud)

yarn当尝试在我的react-rails项目中执行时

ruby-on-rails reactjs webpack react-rails yarnpkg

Got*_*tey

lucky-day

6
推荐指数

1
解决办法

7077
查看次数