时间戳

首页 > 解决方案 > 强类型对象属性依赖于其他对象属性

reactjs - 强类型对象属性依赖于其他对象属性

问题描述

我正在尝试强类型化 React Context 对象，并且我希望其中一个属性依赖于另一个。例如，我正在制作一个 ModalContext，并且我正在使用与 Redux 操作类似的模式，其中有一个类型和有效负载，但我将它们称为modalTypeand modalData，以便我可以通过上下文将数据传递给模态。所以，这里有一些例子......

如果modalType = 'LOGIN MODAL'，则不传递任何数据，仅以模式显示登录表单。

如果modalType = 'RENT MOVIE'，那么modalData = {movieId: 123456}模态框知道要播放哪部电影。

在站点管理上下文中，如果modalType = 'RESET USER PASSWORD', 那么modalData = {userId: 456789}模态可以显示该用户。

这是我的上下文界面。

interface IModalContext {
  visible: boolean; 
  modalType:''|'LOGIN MODAL'|'RENT MOVIE'|'EDIT USER'; 
  modalData: any; 
}

我到底如何modalData依赖 的值modalType？

标签： reactjstypescript

解决方案

为此，您将需要使用联合：

type IModalContext = 
  | {
    visible: boolean;
    modalType: 'LOGIN MODAL',
  }
  | {
    visible: boolean;
    modalType: 'RENT MOVIE',
    modalData: { movieId: number }
  }
  | ...

推荐阅读