Question

代码我定义了组件类，并按如下所示进行连接：

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);

当我尝试在父组件的render函数中使用该组件时，仅传递“ receivedProps”，例如：

<SkypeConversationArea lifecycleEndpointNotifyConfigured={props.lifecycleEndpointNotifyConfigured} />

我得到了错误

TS2322：类型'{lifecycleEndpointNotifyConfigured ：（事件：字符串）=> 任何; }”不可分配为“只读”类型。属性“正在加载” 类型'{lifecycleEndpointNotifyConfigured ：（事件：字符串）中缺少 =>任何； }'。

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

Answer 1

我知道了。我认为我不理解connect语句存在问题。为感兴趣的人发布了解决方案。我很想知道为什么人们认为这件事发生了！

更改组件定义文件以表示以下内容：

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

export default SkypeConversationAreaController;

和JSX如下：

<SkypeConversationArea lifecycleEndpointNotifyConfigured={props.lifecycleEndpointNotifyConfigured} />

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

反应redux打字稿：无法将继承的道具从父级传递到类容器

1 个答案: