react redux typescript：无法将继承的道具从父级传递到类容器

Posted 2023-03-13

【中文标题】react redux typescript：无法将继承的道具从父级传递到类容器

【英文标题】：react redux typescript: cannot pass inherited props from parent to class container

【发布时间】：2018-11-30 02:57:18

【问题描述】：

代码 我定义了组件类并连接如下：

export class SkypeConversationArea extends React.Component<Props> ..
const mapStateToProps = (state: State) => 
  return 
    loading: state.loading,
    hangUp: state.conversation.hangUp,
    selfParticipantStatus: state.conversation.selfParticipant.status
  


const mapDispatchToProps = (dispatch: any) => 
  return 
    saveRef: (ref: htmlElement) => 
      dispatch(saveConersationAreaRef(ref))
    ,
    setFullscreen: (set: boolean) => 
      dispatch(setFullscreen(set))
    
  


type ReceivedProps = 
  lifecycleEndpointNotifyConfigured: (event: LIFECYCLE_EVENT) => any
;
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = ReturnType<typeof mapDispatchToProps>;
type Props = StateProps & DispatchProps & ReceivedProps;

export default connect<StateProps, DispatchProps, ReceivedProps>(mapStateToProps, mapDispatchToProps)(SkypeConversationArea);

当我尝试在父组件的渲染函数中使用该组件时，只传入“receivedProps”，如下所示：

<SkypeConversationArea lifecycleEndpointNotifyConfigured=props.lifecycleEndpointNotifyConfigured />

我得到了错误

TS2322：类型'生命周期端点通知配置：（事件：字符串）=> 任何; ' 不可分配给类型“只读”。属性“加载”是 缺少类型'生命周期端点通知配置：（事件：字符串） => 任何； '。

我的理解是我应该能够从 parent 传递 props 而不必担心将 props 包含在 mapstatetoprops 和 mapdispatchtoprops 中。我相信这是一个错误，但我是 react-redux-typescript 的新手，所以不确定。

【参考方案1】：

我想通了。我认为我不理解连接语句的问题。为感兴趣的人发布了解决方案。我很想知道为什么人们认为会发生这种情况！

将组件定义文件改成如下：

export const SkypeConversationAreaController = connect<StateProps, DispatchProps, ReceivedProps>(mapStateToProps, mapDispatchToProps)(SkypeConversationArea);

export default SkypeConversationAreaController;

JSX 如下：

<SkypeConversationArea lifecycleEndpointNotifyConfigured=props.lifecycleEndpointNotifyConfigured />

成功了！不知道为什么连接/导出默认值不能正常工作，但是很好。