如何在ReactJS中对组件进行分组

Question

问题

我需要帮助才能了解我放置aside代码的位置。 他的目标是呈现searchInput和menuStudy，

等组件

我正在考虑放入container's文件夹，但他没有任何逻辑目标，如请求或其他任何东西，他只对这些容器进行分组和渲染（SeachInputContainer和MenuStudyContainer）。

如果我把它放在AsideContainer中并调用这些容器，你怎么看？

实施例

AsideContainer.jsx

[ ... ]
const Aside = () => (
  <aside className="w-1/4">
    <SearchInputContainer />
    <MenuStudyContainer />
  </aside>
);
[ ... ]

在我的App.jsx中，我只是调用此容器将All全部放在一边。

App.jsx

<div className="flex flex-wrap">
    <Aside /> // all aside componentes live here.
    <div className="w-3/4 pl-8">
        <Switch>
            <Route exact path="/" component={HomePage} />
            <Route path="/login" component={LoginPage} />
        </Switch>
    </div>
</div>

这有道理吗？

文件夹结构

Answer 1

它是一个“包装器”，不仅仅是一个“容器”，实际上它不会通过其状态获取数据或管理子项的道具。 如果你想实现它，可以将“包装器”视为表示组件或HoC，以便它也可以包装其他组件。