Реагируйте с TypeScript: Инициирование состояния в конструкторе - PullRequest
Новая
       17

Реагируйте с TypeScript: Инициирование состояния в конструкторе

0 голосов
/ 15 марта 2019

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

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.
}

Ответы [ 2 ]

1 голос
/ 16 марта 2019

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

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

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

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

1 голос
/ 15 марта 2019

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

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

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

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

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

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

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

  constructor(props: Props) {
   ...
  }

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

...