Question

很抱歉，如果标题没有意义，但是对于CRUD页面，我的意思是像/posts这样的页面可以显示所有帖子，/posts/create这样的页面可以显示创建帖子的表单，{{1 }}以显示所述表单，但要更新数据

当前，我具有以下结构：

/posts/:id/edit

Post / index.js

Post
--index.js
--form.js
--edit.js
--create.js
--list.js

hoc
--PostHOC.js

Post / list.js

import PostList from './list';

class Post extends Component {
    render() {
      <PostList posts={this.props.posts} /> // extracted from Redux
    }
}

Post / form.js

const List = ({ posts }) => {
  const postList = posts.map(post => (
    <div>
      { post.title }
    </div>
  ));

  return (
    <div>{ postList }</div>
  );
}

然后const Form = props => { return ( <SomeImportedForm> <Input defaultValue={this.props.title} /> // extracted from HOC </SomeImportedForm> ); } export default PostHOC(Form);和Post/edit.js基本上看起来一样（我刚刚将Post/create.js导入到它们中，我可能会删除两者，而只是显示表单并根据URL呈现数据）

我已经在Google上搜索了用React构建CRUD页面的好方法，但是可惜我找不到任何方法。所以我选择在这里问。关于如何改善这一点的任何提示？另外，为了简洁起见，我省略了一些代码，但是我相信这足以使每个人都了解我要尝试做的事情。

Answer 1

React对如何将文件放入文件夹没有意见。就是说，您可能要考虑在生态系统中流行的几种常见方法。

这实际上取决于应用程序的复杂程度，但是以下几种方法可供考虑：

按功能或路径分组-[构建项目的一种常见方法是在按功能或路径分组的文件夹中找到CSS，JS等。]

按文件类型分组-[构建项目的另一种流行方式是将相似文件分组在一起]

根据组件在应用程序中的角色将其分为不同的文件夹-[这是我通常采用的方法，恕我直言，这是最好的方法，因为随着项目的发展（希望），您将拥有更重要的意义是您的主要组件和功能位于何处以及所有组件如何组合在一起。]

其他建议：不要考虑过度-特别是在开始时。如果您只是开始一个项目，请不要花费超过五分钟的时间来选择文件结构。选择以上任何一种方法（或自己想办法）并开始编写代码！在编写了一些实际代码之后，您可能还是想重新考虑一下。随着项目规模的扩大，在实践中我们经常混合使用上述所有方法。因此，从一开始就选择“正确”的选择并不是很重要。

意思是，专注于代码。祝您学习React并祝您黑客愉快；）

用CRUD页面构建React应用的更好方法是什么？

1 个答案: