React中Component渲染Container是否合理？传参问题咨询

一、Component中渲染Container是否合理？ #

完全合理，Container/Component的核心是逻辑与视图分离，而非严格的层级限制。只要你的Component始终只负责纯视图渲染（比如布局、样式、展示内容），不处理任何业务逻辑（比如状态修改、action分发），仅仅作为中间层传递必要的props给嵌套的Container，这种做法就没问题。

需要注意的是：别让Component承担本该属于Container的职责，比如解析状态、处理action逻辑，保持Component的“纯视图”属性即可。

二、解决Component导入Container reducer类型的方案 #

针对你遇到的Component需要导入Container目录下reducer类型的问题，推荐以下几种可行方案：

1. 抽离共享类型到独立文件 #

把reducer相关的Action、State等类型从reducer.ts中拆分出来，放到单独的类型文件里，让Component和Container都从这个文件导入类型，避免Component直接依赖reducer.ts。

调整后的目录结构：

src/
- containers/
  - A/
    - index.tsx
    - reducer.ts
    - types.ts // 存放Action、State等类型定义
  - B/(...)
- components/
  - A/(index.tsx)

示例代码：

// containers/A/types.ts
export type Action = /* 你的Action类型定义 */;

// components/A/index.tsx
import { B } from 'containers';
import { Dispatch } from 'react';
import { Action } from 'containers/A/types'; // 从类型文件导入，而非reducer.ts

interface AProps {
   dispatch: Dispatch<Action>;
}

return <B dispatch={dispatch}/>;

2. 让目标Container自行处理类型 #

把dispatch的类型定义交给接收它的Container B，上层Component只需要传递dispatch实例，无需导入Action类型。

示例代码：

// containers/B/index.tsx
import { Action } from '../A/types';
import { Dispatch } from 'react';

interface BProps {
  dispatch: Dispatch<Action>; // 这里自行定义类型
}

// components/A/index.tsx
import { B } from 'containers';
import { Dispatch } from 'react';

interface AProps {
   dispatch: Dispatch; // 无需指定具体Action类型
}

return <B dispatch={dispatch}/>;

3. 全局增强Redux Dispatch类型（若使用Redux） #

如果你的项目用了Redux，可以通过全局类型增强让dispatch自动拥有正确的Action类型，无需手动传递dispatch作为props，也不用在Component中导入类型。

示例代码：

// src/store.ts
import { configureStore } from '@reduxjs/toolkit';
import aReducer from './containers/A/reducer';

const store = configureStore({
  reducer: {
    a: aReducer,
  },
});

// 导出全局类型
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// 在组件中使用
// containers/B/index.tsx
import { useDispatch } from 'react-redux';
import { AppDispatch } from '../../store';

const dispatch = useDispatch<AppDispatch>();
// 此时dispatch会自动识别所有Action类型，无需上层传递

4. 调整组件层级，减少跨层传递 #

如果你的布局允许，可以直接在Container A中渲染Container B，跳过Component A的中间传递。比如Container A同时渲染Component A和Container B，把需要的状态或dispatch直接传给Container B，这样Component A就不用处理和Container B相关的逻辑了。当然，这要根据你的实际层级需求来判断是否适用。

内容的提问来源于stack exchange，提问作者zakrapovic