超详细教程：打造 React UI 组件库 (四) 手把手教你构建 Dialog 组件

2023-10-26 23:14:43

手把手教你搭建 React UI 组件库 (四) 实现 Dialog 组件

在上一篇文章中，我们介绍了如何在 React UI 组件库中构建一个 Button 组件。在本篇文章中，我们将继续构建一个 Dialog 组件。

Dialog 组件是一个模态窗口，它可以用来显示重要信息或收集用户输入。Dialog 组件通常用于以下场景：

显示错误消息或警告信息
收集用户输入，例如登录表单或注册表单
显示其他重要信息，例如产品详情或服务条款

创建 Dialog 组件

首先，我们需要创建一个 Dialog 组件。我们可以使用以下命令在项目中创建一个名为 Dialog.tsx 的文件：

touch src/lib/Dialog/Dialog.tsx

然后，我们可以打开 Dialog.tsx 文件，并添加以下代码：

import * as React from "react";

interface DialogProps {
  title: string;
  content: string;
  onClose: () => void;
}

const Dialog: React.FC<DialogProps> = ({ title, content, onClose }) => {
  return (
    <div className="dialog">
      <div className="dialog-header">
        <div className="dialog-title">{title}</div>
        <button className="dialog-close-button" onClick={onClose}>
          ×
        </button>
      </div>
      <div className="dialog-content">{content}</div>
    </div>
  );
};

export default Dialog;

这段代码定义了一个名为 Dialog 的函数组件，它接受三个参数：title、content 和 onClose。title 是对话框的标题，content 是对话框的内容，onClose 是一个当对话框关闭时调用的函数。

使用 Dialog 组件

现在，我们可以使用 Dialog 组件了。我们可以先在项目中创建一个名为 App.tsx 的文件：

touch src/App.tsx

然后，我们可以打开 App.tsx 文件，并添加以下代码：

import * as React from "react";
import Dialog from "./lib/Dialog/Dialog";

const App: React.FC = () => {
  const [showDialog, setShowDialog] = React.useState(false);

  const openDialog = () => {
    setShowDialog(true);
  };

  const closeDialog = () => {
    setShowDialog(false);
  };

  return (
    <div className="app">
      <button onClick={openDialog}>Open Dialog</button>

      {showDialog && (
        <Dialog
          title="Hello, world!"
          content="This is a dialog."
          onClose={closeDialog}
        />
      )}
    </div>
  );
};

export default App;

这段代码定义了一个名为 App 的函数组件，它使用 Dialog 组件来显示一个对话框。当用户点击 “Open Dialog” 按钮时，showDialog 状态被设置为 true，此时对话框就会显示出来。当用户点击对话框中的 “×” 按钮时，showDialog 状态被设置为 false，此时对话框就会关闭。