我无法使用 React_on_Rails gem 注册组件

Posted 2023-02-15

【中文标题】我无法使用 React_on_Rails gem 注册组件

【英文标题】：I can't register components using React_on_Rails gem

【发布时间】：2017-08-25 00:07:56

【问题描述】：

注册在默认的 HelloWorld 应用中运行良好，但是一旦我删除了文件夹并创建了自己的文件夹，它就停止工作了。

我在 app/bundles 下创建了一个名为 posts 的新文件夹，其中包含一个启动文件夹。

在启动文件夹中，我正在像这样注册组件：

import ReactOnRails from 'react-on-rails';

import PostContainer from '../containers/PostContainer';

ReactOnRails.register(
  PostContainer
);

PostContainer.jsx 文件位于容器文件夹中，如下所示：

import React,  PropTypes, Component  from 'react';

export default class PostsContainer extends React.Component 
  render() 
    return (
      <div>
        <Header />
        <PostList posts=this.props.posts />
      </div>
    )
  

我的 webpack.config.js 文件如下所示：

entry: [
    'es5-shim/es5-shim',
    'es5-shim/es5-sham',
    'babel-polyfill',
    './app/bundles/HelloWorld/startup/registration',
  ],

我尝试将 HelloWorld 更改为帖子或帖子，但没有成功。

我应该有一个名为 webpack.configure.build.js 的文件吗？还是 webpack.config.js 是我需要编辑的文件？

任何帮助将不胜感激！

【问题讨论】：

我们可以获取所有这些文件的文件路径吗？

【参考方案1】：

您是否将组件添加到 erb 视图文件并传入相关的 props？您需要在 Posts 控制器或呈现您的 Posts 视图的任何控制器中添加道具。我很确定你需要在你的 webpack 配置中添加一行：

config: 
  'webpack-bundle': [
    '...',
    './app/bundles/Posts/startup/registration'
  ]

那么在你看来：

<%= react_component("PostsContainer", props: @posts_props, prerender: false) %>

还要确保您的布局文件中有：

<%= javascript_pack_tag 'webpack-bundle' %>

注意：PropTypes 现在应该从 prop-types 包中导入。最近，React 团队从 React 核心中提取了该软件包。