React. Is it bad if presentational components contain container components?

时间:2016-04-21 21:49:00

标签: reactjs redux flux

According to https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.i63w9pvzw

Presentational components:

  • May contain both presentational and container components** inside, and usually have some DOM markup and styles of their own.
  • Have no dependencies on the rest of the app, such as Flux actions or stores.

I think if presentational components contain container components, they will get depend on Flux or Redux (or whatever the container components depend on).

That will make presentational components hard to test and reuse.

1 个答案:

答案 0 :(得分:3)

这不错,完全没问题。 react-redux的重点是让您将容器组件直接连接到商店,而不必将整个商店作为道具传递给每个组件。组件重用不是问题,因为<Provider>组件将使任何连接的容器组件在其下方的任何位置工作。

实际上测试容器组件并不困难。您可以将连接的组件设置为默认导出,但也可以将未连接的组件导出为命名导出,您可以将其用于测试,并在这些测试中手动传递道具。有关详细信息,请参阅'Writing Tests' part of the Redux docs的“已连接组件”部分。

至于测试包含容器组件的表示组件,它不会是一个问题。浅渲染在测试中仍然可以正常工作(除非你遇到this issue)。如果您需要在测试中安装组件,您始终可以将其包装在<Provider>组件中,并且该组件具有特定于该测试的存储。

编辑:此答案特定于Redux with react-redux。其他Flux实现可能会遇到一些我不知道的困难。