在 Rails 应用程序中集成来自 Rails-assets.org 的 React 组件答案

【问题标题】：Integrated React component from Rails-assets.org in Rails Application在 Rails 应用程序中集成来自 Rails-assets.org 的 React 组件
【发布时间】：2017-04-19 04:09:59
【问题描述】：

我尝试将 rails-assets.org 中的 react 组件集成到我的 rails 应用程序中。目前，我使用 react-rails gems 在我的应用程序中编写反应视图。

我想使用其他 react 组件，例如 react-router、react-select 等。我发现使用 rails-assets.org 是实现此目的的简单方法。但是，我不知道调用此组件的正确方法。谁能教教我？

例如，我想在我的 rails 应用程序中集成 react-select ：

宝石文件：

gem 'rails-assets-react-select','~> 1.0.0.rc.3', source: 'https://rails-assets.org'

应用程序.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require react-select
//= require react-dom
//= require_tree .
$(function(){ $(document).foundation(); });

Applications.scss.sass

*= require_tree .
 *= require_self
 *= require foundation
 *=require foundation_and_overrides
 *= require react-select
@import "foundation_and_overrides"

下面是我调用这个组件的代码 (GroupSetting.jsx)

var Select  = require('react-select');
var GroupSetting = React.createClass({
	getInitialState () {
		return {
			options: [
				{ value: true, label: 'Yes' },
				{ value: false, label: 'No' }
			],
			value: null
		};
	},
	onChange(value) {
		this.setState({ value });
		console.log('Boolean Select value changed to', value);
	},
	render () {
		return (
			<div className="section">
				<h3 className="section-heading">{this.props.label}</h3>
				<Select
					onChange={this.onChange}
					options={this.state.options}
					simpleValue
					value={this.state.value}
					/>
				<div className="hint">This example uses simple boolean values</div>
			</div>
		);
	}
});

我收到以下错误：

请有人指导我如何完成这项工作。

【问题讨论】：

有人可以帮我吗？

标签： javascript ruby-on-rails reactjs rubygems react-rails

【解决方案1】：

这应该通过简单地删除var Select = require('react-select'); 行来工作

由于您没有使用 javascript 打包程序，因此您不需要导入/要求。使用 rails-assets 中的宝石时，这既是福也是祸，但这是另一次的咆哮......

【讨论】：