Webpacker 重构后 React 组件未呈现答案

【问题标题】：React Component Not Rendering after Webpacker refactoringWebpacker 重构后 React 组件未呈现
【发布时间】：2018-03-12 20:01:20
【问题描述】：

我正在尝试将我的 Rails 5.1.3 应用程序从 react-rails 转换为 webpacker - 并且正在使用 webpacker-react gem。一切似乎都可以正常加载（没有错误），但是 React 组件本身不会呈现。

在 application.js 中

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

在我的erb看来：

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

在 UserSchedule.jsx 里面我有这个代码：

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

控制台日志记录适用于除渲染内部之外的所有内容。

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 gem 从 react-rails 转换到 webpacker 吗？

【问题讨论】：

标签： javascript ruby-on-rails ruby reactjs webpacker

【解决方案1】：

尝试将此添加到您的 js 文件中

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

【讨论】：