在Redux连接的React组件中使用PropTypes的问题求助

我之前也碰到过一模一样的情况——为了方便浅测试导出了原始组件和Redux连接后的组件，结果加PropTypes时控制台全红，每个Prop都报缺失错误。核心问题其实是Redux的connect包装组件后，PropTypes的验证逻辑容易和组件的props来源（父组件传入/Redux注入）混淆，下面给你几个不用大改现有双导出设置的解决办法：

1. 只在原始组件上定义PropTypes（最推荐，零额外改动） #

你的原始组件是真正接收并使用所有props的地方，所以把所有PropTypes都定义在它上面就够了，连接后的组件完全不需要加PropTypes。

举个例子：

// 原始组件：负责定义所有需要的PropTypes
const MyComponent = ({ user, onUpdate }) => {
  // 组件逻辑
};

MyComponent.propTypes = {
  // Redux注入的props
  user: PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
  }).isRequired,
  // 父组件传入的props
  onUpdate: PropTypes.func.isRequired,
};

// 导出原始组件用于测试
export default MyComponent;

// 连接后的组件：只负责Redux映射，无需PropTypes
import MyComponent from './MyComponent';
import { connect } from 'react-redux';
import { updateUser } from '../actions';

const mapStateToProps = state => ({
  user: state.currentUser,
});

const mapDispatchToProps = {
  onUpdate: updateUser,
};

// 导出连接后的组件用于实际渲染
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

这样做的好处：

• 原始组件会验证所有它收到的props（不管是Redux注入的还是父组件传的）
• 连接后的组件不需要处理PropTypes，父组件只需要传它该传的props，Redux注入的部分由connect负责提供
• 浅测试时直接用原始组件，手动传入所有PropTypes要求的props即可，完全不影响测试流程

2. 给连接后的组件单独定义PropTypes（适合需要限制父组件传参的场景） #

如果担心父组件给连接后的组件传了不该传的props，可以给连接后的组件单独定义PropTypes，但只包含父组件需要传入的部分，Redux注入的props不要加在这里：

// 连接后的组件
const ConnectedMyComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);

// 只验证父组件需要传的props
ConnectedMyComponent.propTypes = {
  onUpdate: PropTypes.func.isRequired,
};

export default ConnectedMyComponent;

这样连接后的组件会拦截不符合要求的父组件传参，而原始组件依然会验证所有它收到的props（包括Redux注入的）。

3. 用defaultProps处理可选的Redux props #

如果某些Redux注入的props是可选的，在原始组件上设置defaultProps就能避免不必要的报错：

MyComponent.defaultProps = {
  user: {
    id: 0,
    name: 'Guest',
  },
};

额外提醒：测试时的小注意 #

因为你用原始组件做浅测试，测试时要手动传入所有PropTypes要求的props（包括那些实际环境中由Redux注入的），比如：

import MyComponent from './MyComponent';

test('renders correctly', () => {
  const mockUser = { id: 1, name: 'Test User' };
  const mockOnUpdate = jest.fn();
  
  const wrapper = shallow(<MyComponent user={mockUser} onUpdate={mockOnUpdate} />);
  
  // 测试逻辑
});

这样测试时就不会触发PropTypes的错误提示了。

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