React 구성 요소가 Webpacker 리팩토링 후 렌더링되지 않음

Question

Rails 5.1.3 앱의 반응 레일에서 webpacker로 전환하려고합니다. webpacker-react 보석을 사용하고 있습니다. 모든 것이 잘로드되는 것 같습니다 (오류 없음). 그러나 React 구성 요소 자체는 렌더링되지 않습니다. 내 ERB보기 application.js

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

에서

:

이

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> 
    ); 
    } 
} 

콘솔 로깅은 모든 작동 다음 UserSchedule.jsx 내부

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

이 코드를 렌더링 내부를 제외하고.

User schedule outside test 
First test 

그래서 jsx 파일이로드 중임을 알고 있습니다. 렌더링 된 요소 내에서 적절한 html 태그가 표시됩니다.

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

그래서 내가 뭘 잘못하고 있니? 누구든지 webpacker-react 보석과 함께 반응 레일에서 webpacker로 이동하기 전에이 작업을 수행합니까?

Answer 1

봅니다

WebpackerReact.setup({UserSchedule}) 

이 너무

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 

파일 당신의 js에 이것을 추가