Integrierte React-Komponente von Rails-assets.org in der Rails-Applikation

Question

Ich habe versucht, die reaktive Komponente von rails-assets.org in meine Rails-Applikation zu integrieren. Zur Zeit habe ich react-rails gems verwendet, um in meiner Anwendung react view zu schreiben.

Ich möchte andere react-Komponente wie react-Router, react-select, etc. verwenden. Ich fand die einfachen Möglichkeiten, um dies zu erreichen ist mit rails-assets.org. Allerdings kenne ich nicht die richtigen Möglichkeiten, diese Komponente zu nennen. Kann mir jemand etwas beibringen?

Zum Beispiel i integrieren möchten reagieren Auswahl in meine Rails-Anwendung:

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"

Unten ist mein Code, um diese Komponente (GroupSetting.jsx)

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

ich unten Fehler bekam genannt:

Jemand bitte führen Sie mich, wie man dies erledigt.

Answer 1

Dies wird durch einfaches Entfernen der var Select = require('react-select'); Linie

arbeiten sollte, da Sie kein JavaScript Packager verwenden, brauchen Sie nicht/require zu importieren. Dies ist sowohl ein Segen als auch ein Fluch, wenn man Edelsteine ​​von Schienen-Assets verwendet, aber das ist eine Schimpfkanonade für eine andere Zeit ...