Mehrere Uncaught Fehler Mit den reagieren Schienen Gem

Question

Auf meine Frage, Vorwort, ich bin nach this Führer.

Beim Versuch, eine CRUD-Schnittstelle Rails zu bauen und Reagieren, erhalte ich this Fehler, wenn ein neues Element zu erstellen versuchen:

addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded.

ich nicht falsch war ein ref Attribut auf jeden JSX Zugabe nicht innerhalb von eine render Methode, also muss ich mehrere Kopien von React innerhalb meiner Asset-Pipeline haben.

Forschung ergab folgende mögliche Ergebnisse:

1. Einführung webpack oder Searchkit, in this vorgeschlagen SO zu beantworten, schien klobig Abhilfen für meine einfache CRUD-Schnittstelle.
2. This nicht ausgewählt SO Antwort vorgeschlagen, die //= require react Linie von ./app/assets/javascripts/application.js entfernen. Dies erwies sich als nicht erfolgreich.
3. Ausgabe # 671, von dem offiziellen GitHub reagieren Schienen Repo. here, umreißt den ersten Teil meiner Ausgabe perfekt. Ich folgte diese potentielle Lösung, die die //= require react-server Linie der ./app/assets/javascripts/server_rendering.js Datei schlägt vor, zu entfernen. Dies führt zu einem neuen Fehler, unten beschrieben:

Uncaught ReferenceError: $ is not defined

Was ich davon ausgehen, dass bedeutet react_server nicht nur eine zweite Kopie von React enthält, sondern lädt auch etwas von entscheidenden Bedeutung für meine AJAX-Aufrufe.

Als Referenz sind hier die Inhalte der ./app/assets/javascripts/application.js:

// This is a manifest file that'll be compiled into application.js, which will include all the files 
... 
// about supported directives. 
// 
//= require rails-ujs 
//= require react 
//= require components 
//= require turbolinks 
//= require_tree . 

und ./app/assets/javascripts/server_rendering.js:

//= require react_ujs 
//= require react-server 
//= require ./components 
... 

Wo ein Satz von Ellipsen oder ..., werden verwendet, um bekannt Kommentar Abschnitte zu verkürzen.

• Ruby-Version: 2.3.3p222 (2016.11.21 Revision 56859)
• Rails-Version: 5.1.1
• reagieren-Schienen-Version: 2.2.0

Answer 1

das dritte Potential Antwort, oder Entfernen der //= require react-server von ./app/assets/javascripts/server_rendering.js, war ein Schritt in die richtige Richtung.

Das Entfernen dieser Zeile führt nicht zu einem neuen Problem, es zeigt nur einen weiteren Fehler, den Sie die ganze Zeit hatten. react_server definiert nicht die $ Variable für AJAX nennt, hat die jQuery gem.

gefunden here. Ich bin in dieser Lösung, weil der Fehler zuversichtlich:

Uncaught ReferenceError: $ is not defined

ein jQuery-Problem ist, wie die AJAX nennt man wohl eine Form in ihrem offiziellen Dokument verwiesen nehmen machen. here.

daher nach gem install jquery-rails in der Shell ausgeführt wird, Ihre ./app/assets/javascripts/application.js sollte wie folgt aussehen:

... 
//= require rails-ujs 
//= require jquery 
//= require react 
//= require components 
//= require turbolinks 
//= require_tree . 

Ihre ./app/assets/javascripts/server_rendering.js Datei sollte wie folgt aussehen:

//= require react_ujs 
// require react-server 
//= require ./components 
... 

Beachten Sie, dass require react-server wird als Kommentar gekennzeichnet.

Und stellen Sie sicher, dass Sie die Lösung in this SO Antwort in Bezug auf die .\app\views\layouts\application.html.erb Datei zu folgen.