如何在ReactJS中分组组件

Question

问题

我需要帮助理解我应该将aside代码放在哪里。它的目的是呈现像searchInput和menuStudy这样的组件。

我考虑把他放在container文件夹中，但他没有任何逻辑目标，比如请求或其他任何东西，他只是分组并呈现这些容器（SeachInputContainer和MenuStudyContainer）。

如果我把这个放在AsideContainer中并调用这些容器，你觉得怎么样？

例子

AsideContainer.jsx

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

在我的App.jsx中，我只是调用了这个容器来获取所有的aside。

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>

This makes sense?

Folder structure

- ralfting

Answer 1

它是一个“包装器”，更像是一个“容器”，实际上它不通过状态获取数据或管理子组件的属性。 如果你想让它包装其他组件，那么“包装器”可以被认为是一个展示性组件或一个高阶组件。

- Mosè Raguzzini

---

好的，那么我会有一个组件调用SearchInputContainer和MenuStudyContainer，是这样理解吧？很合理=D - ralfting