Question

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

在application.js

中

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

在我的观点中：

<%= 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之前做过这种转变吗？

Answer 1

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

shifted

这也是

WebpackerReact.setup({UserSchedule})

Webpacker重构后，React Component Not Rendering

1 个答案: