[英]React Component Not Rendering after Webpacker refactoring
我正在尝试为我的 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')
在我看来:
<%= 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=""{\"appts\":[{\"title\":\"Isobel ...
那么我做错了什么? 有没有其他人使用 webpacker-react gem 从 react-rails 到 webpacker 进行这种转变?
尝试将其添加到您的 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.