gpt4 book ai didi

javascript - Webpacker 重构后 react 组件不呈现

转载 作者:行者123 更新时间:2023-11-30 21:06:56 26 4
gpt4 key购买 nike

我正在尝试将我的 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 之前,还有其他人做过这种转变吗?

最佳答案

尝试将其添加到您的 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

关于javascript - Webpacker 重构后 react 组件不呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46513818/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com