如何将自定义 reactjs 组件（belle）添加到我的 rails 应用程序答案

【问题标题】：How to add custom reactjs components (belle) to my rails app如何将自定义 reactjs 组件（belle）添加到我的 rails 应用程序
【发布时间】：2015-07-27 12:36:10
【问题描述】：

我想将自定义反应组件 (belle) 添加到我的 rails 应用程序。我正在使用 react-rails 1.0.0 作为我的视图层，我用咖啡脚本编写它。

首先我是 Reactjs 的新手，感谢这个网站 Bring CommonJS to your asset pipeline 移动到 browserify-rails 我在 github 页面和 arkency 博客上按原样安装了 browserify。然后我在控制台中运行npm install --save belle，我添加到我的application.js：

var belle = require('belle');
TextInput = belle.TextInput;

最后，我将 Belle 的简单组件添加到我的主要组件中

'<TextInput defaultValue={Update here and see how the input grows} />'

在我的 sites.js.coffee 文件下面：

@Sites = React.createClass
  getInitialState: ->
    sites: @props.data
  getDefaultState: ->
    sites: []
  render: ->
    React.DOM.div
      className: 'sites_wrapper'
      '<TextInput defaultValue={Update here and see how the input grows} />'
      for site in @state.sites       
        React.DOM.div
          className: 'col-md-4 text-center'
          React.createElement Site, key: site.id, site: site, articles: site.articles

结果是，现在我有空白页。这种方式 - 将自定义组件添加到我的 rails 应用程序，好吗？还是有更好的方法来做到这一点？如果第一个问题的答案是“是”，我做错了什么？

感谢您的帮助。

【问题讨论】：

标签： ruby-on-rails reactjs

【解决方案1】：

我无法在 Rails 部分为您提供帮助，但我注意到在 TextInput 前面缺少一个 var 声明。这是 Belle 自述文件的入门部分中的一个错误。

正确版本：

var TextInput = belle.TextInput;

【讨论】：