首页 文章

Rails应用程序中Rails-assets.org的集成React组件

提问于
浏览
0

我试图在rails应用程序中集成来自rails-assets.org的react组件 . 目前,我使用react-rails gems在我的应用程序中编写反应视图 .

我想使用其他反应组件,如react-router,react-select等 . 我发现通过使用rails-assets.org获得这个的简单方法 . 但是,我不知道调用此组件的正确方法 . 有人可以教我吗?

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

Gemfile:

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

的application.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>
		);
	}
});

我得到以下错误:
Error 1

enter image description here

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

1 回答

  • 0

    这应该只需删除 var Select = require('react-select'); 行即可

    由于您没有使用javascript打包程序,因此无需导入/要求 . 当使用来自rails-assets的宝石时,这既是一种祝福也是一种诅咒,但这又是另一次的咆哮......

相关问题