React Rails 组件无法正常工作 Rails 5.2.4

Question

我安装了react-rails，因为我想在rails 5.2.4应用程序上使用rails。

当我安装它时，我在app/javascripts/目录上基本上得到了以下顺序：

components [directory]
---.keep file
packs [directory]
---applicationCache.js
---hello_react.jsx
---server_rendering.jsx

在组件目录中，我在appjavascriptscomponents' which I link to my Appointments controller and views via<%=中添加了一个名为appointments.jsx的文件react_contension'约会'%>here is the content of the约会.jsx`文件：

const Appointments = () => {
return (
<div>
<h1>Hello Appointments</h1>
</div>
);
};

由于我已经通过<%= react_component 'Appointments' %>将其链接到我的索引视图，我希望它在我的根目录上显示一个h1标记，上面有文本Hello Appointments(我已经在routes.rb文件中设置了它(，但我在控制台上得到了ff错误：

Hello World from Webpacker
fromRequireContextWithGlobalFallback.js:21 Error: Cannot find module './Appointments'
at webpackContextResolve (.*$:13)
at webpackContext (.*$:8)
at fromRequireContext.js:13
at Object.getConstructor (fromRequireContextWithGlobalFallback.js:15)
at Object.mountComponents (index.js:89)
at HTMLDocument../node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount (index.js:149)
at Object.e.dispatch (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
at r.notifyApplicationAfterPageLoad (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
at r.pageLoaded (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
at turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
(anonymous) @ fromRequireContextWithGlobalFallback.js:21
mountComponents @ index.js:89
./node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount @ index.js:149
e.dispatch @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
r.notifyApplicationAfterPageLoad @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7
r.pageLoaded @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7
(anonymous) @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
fromRequireContextWithGlobalFallback.js:22 ReferenceError: Appointments is not defined
at eval (eval at ./node_modules/react_ujs/react_ujs/src/getConstructor/fromGlobal.js.module.exports (fromGlobal.js:12), <anonymous>:1:1)
at ./node_modules/react_ujs/react_ujs/src/getConstructor/fromGlobal.js.module.exports (fromGlobal.js:12)
at Object.getConstructor (fromRequireContextWithGlobalFallback.js:19)
at Object.mountComponents (index.js:89)
at HTMLDocument../node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount (index.js:149)
at Object.e.dispatch (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
at r.notifyApplicationAfterPageLoad (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
at r.pageLoaded (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
at turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
(anonymous) @ fromRequireContextWithGlobalFallback.js:22
mountComponents @ index.js:89
./node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount @ index.js:149
e.dispatch @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
r.notifyApplicationAfterPageLoad @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7
r.pageLoaded @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7
(anonymous) @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
index.js:100 [react-rails] Cannot find component: 'Appointments' for element <div data-react-class=​"Appointments" data-react-props=​"{}​" data-react-cache-id=​"Appointments-0">​</div>​
index.js:103 Uncaught Error: Cannot find component: 'Appointments'. Make sure your component is available to render.
at Object.mountComponents (index.js:103)
at HTMLDocument../node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount (index.js:149)
at Object.e.dispatch (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
at r.notifyApplicationAfterPageLoad (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
at r.pageLoaded (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
at turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
mountComponents @ index.js:103
./node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount @ index.js:149
e.dispatch @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
r.notifyApplicationAfterPageLoad @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7
r.pageLoaded @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7
(anonymous) @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6

以下是我在app/packs/目录下的application.js文件的内容：

console.log('Hello World from Webpacker')
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

你知道我在这里做错了什么吗？为什么文本没有显示在视图中？

Answer 1

您导出组件了吗？即export default Appointments;。此外，这可能是一个区分大小写的问题，即您使用大写react_component 'Appointments'和appointments.jsx来调用它。