9、React与TypeScript开发入门指南

React与TypeScript开发入门指南

1. 类组件状态管理

在React应用中，状态（state）是决定组件行为和渲染方式的关键因素。为了管理确认对话框的打开和关闭状态，我们需要在应用中引入状态。

1.1 定义 open 属性

首先，在 Confirm 组件的属性接口中添加 open 属性，用于控制对话框的可见性：

interface IProps {
  open: boolean;
  title: string;
  content: string;
  cancelCaption?: string;
  okCaption?: string;
  onOkClick: () => void;
  onCancelClick: () => void;
}

在 render 函数中，使用JavaScript三元表达式根据 open 属性的值来决定是否添加 confirm-visible CSS类：

public render() {
  return (
    <div
      className={
        this.props.open
          ? "confirm-wrapper confirm-visible"