React Composant non rendu après le refactoring de Webpacker

Question

J'essaie de passer des rails de réaction à webpacker pour mon application Rails 5.1.3 - et j'utilise la gemme webpacker-react. Tout semble bien se charger (pas d'erreurs), mais le composant React lui-même ne sera pas rendu.

dans application.js

import WebpackerReact from 'webpacker-react' 
import UserSchedule from 'components/userschedule' 
console.log('First test') 

à mon avis erb:

<%= react_component 'UserSchedule', render(template: 'appts/user-sched.json.jbuilder') %> 

A l'intérieur du UserSchedule.jsx J'ai ce code:

var React = require('react'); 
var ReactDOM = require('react-dom'); 

console.log('User schedule file test') 

class UserSchedule extends React.Component { 
    render() { 
    console.log('User schedule inside render') 
    return (
     <div className="container-fluid"> 
     <p>TEST THAT THIS WORKS</p> 
     </div> 
    ); 
    } 
} 

L'enregistrement de la console fonctionne sur tout sauf pour l'intérieur du rendu.

User schedule outside test 
First test 

Donc, je sais que le fichier jsx est en cours de chargement. Et à l'intérieur des éléments rendus l'étiquette html correcte apparaît:

<div data-react-class="UserSchedule" data-react-props="&quot;{\&quot;appts\&quot;:[{\&quot;title\&quot;:\&quot;Isobel ... 

Alors qu'est-ce que je fais mal? Quelqu'un d'autre fait-il ce changement auparavant des rails de réaction à webpacker avec la gemme webpacker-réagir?

Answer 1

Essayez d'ajouter ceci dans votre fichier js

WebpackerReact.setup({UserSchedule}) 

et cela aussi

var React = require('react'); 
var ReactDOM = require('react-dom'); 

console.log('User schedule file test') 

class UserSchedule extends React.Component { 
    render() { 
    console.log('User schedule inside render') 
    return (
     <div className="container-fluid"> 
     <p>TEST THAT THIS WORKS</p> 
     </div> 
    ); 
    } 
}  
export default UserSchedule; //add this