Блог

У меня есть длинная форма в приложении TypeScript React, где нам нужно скрыть / показать или включить / отключить на основе значения status.

 export interface IState {
  Status: string;
  DisableBasicForm: boolean;
  DisableFeedbackCtrl: boolean;
  DisableTypeofReqCtrl: boolean;
  DisablePurposeCtrl: boolean;
  DisableDutyStation: boolean;
  DisableContractManager: boolean;
  DisableSection: boolean;
  DisableStartDate: boolean;
  DisableEndDate: boolean;
  DisableEstimateDate: boolean;
  DisableTotalBudget: boolean;
  DisableDeliveryDate: boolean;
  DisableWBS: boolean;
  DisableGrant: boolean;
  DisableGrantExpiry: boolean;
  DisableCaseSubmitter: boolean;
  DisablePreparedBy: boolean;
  DisablePreparedDate: boolean;
  ShowSupplyManagerPanel: boolean;
  ShowBudgetOwnerPanel: boolean;
  DisableSupplyManagerPanel: boolean;
  DisableBudgetOwnerPanel: boolean;
}
  

в то время как в классе мне нужно инициировать состояние в конструкторе, что было бы лучшим способом сделать, мне не нужно инициировать очень переменную, присутствующую в IState?

 public constructor(props: IGoodsProps) {
    super(props);
//What should be written here, minimal code required.
}
  

Если вас устраивает, что некоторые свойства имеют значение по умолчанию undefined , вы можете пометить их как необязательные при IState использовании ? . Например (я выбираю некоторые свойства случайным образом, поскольку я не знаю ваших требований):

 export interface IState {
  Status: string; // this one is required
  DisableBasicForm?: boolean; // this one is optional
  DisableFeedbackCtrl?: boolean;
  // ...
}
  

Тогда вы можете опустить необязательные свойства при инициализации состояния в конструкторе.

Какие свойства сделать необязательными? Если вы хотите, чтобы какое-либо из ваших логических значений по умолчанию было false, во многих случаях это undefined сработает вместо этого, потому что undefined является «falsey» в JavaScript. (могу подробнее остановиться, если это не имеет смысла)

Если вы укажете реализацию IState, вам нужно будет инициировать каждое свойство IState (на основе вашей логики), потому что свойства в IState не помечены как необязательные.

Пример псевдокода:

 public constructor(props: IGoodsProps) {
    const {status} = this.props
     super(props);
     this.state ={
       Status: status,
       DisableBasicForm: status.Status === 'yourValue',
       ... // initialize here
    } 
}
  

Если у вас есть некоторое значение по умолчанию для вашего состояния, переданное в качестве prop, вы могли бы использовать object decostructor:

 public constructor(props: IGoodsProps) {
    const {status} = this.props
     super(props);
     this.state ={
       ...status,
       DisableBasicForm: status.Status === 'yourValue', // just overwrite this property with your logic
    } 
}
  

Вы также можете инициализировать свое состояние вне costructor:

 class Component extends React.Component<Props, State> {
  state: State = {
    Status: 'value',
    ... // initialize here
  }

  constructor(props: Props) {
   ...
  }
  

Если у вас есть какая-то общая логика для настройки вашего состояния, и вы не хотите повторяться, вы могли бы оценить, используя React.useState но ваш компонент должен быть функцией.