Question

我在TypeScript React App中有一个Long形式，我们需要根据状态值隐藏/显示或启用/禁用。

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

在上课时，我需要在构造函数中初始化State，什么是最好的方法，我不需要初始化IState中存在的非常可变的变量？

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

Answer 1

如果您声明实现IState，则需要初始化IState的每个属性（基于您的逻辑），因为IState中的属性未标记为可选。

伪代码示例：

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

如果您通过prop传递的状态有一些默认值，则可以使用对象分解器：

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进行评估，但是您的组件必须是一个函数。

Answer 2

如果可以接受某些默认值为undefined的属性，则可以使用IState在?中将它们标记为可选。例如（由于我不知道您的要求，我随机选择了一些属性）：

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

然后，您可以在构造函数中初始化状态时省略可选属性。

哪些属性是可选的？如果您希望默认情况下将任何布尔值设置为false，则在许多情况下undefined会起作用，因为JavaScript中的undefined is "falsey"。（如果这没有意义，可以进一步详细介绍）

使用TypeScript进行反应：构造函数中的状态初始化

2 个答案: