组件设计 | 青训营笔记

THIM
108 阅读3分钟

如何做组件设计？

  • 确定组件的功能和用途
  • 制定组件的 API
  • 设计组件的外观和交互
  • 编写组件的实现代码
  • 进行组件测试和验证
  • 提供组件的文档和示例
  • 审查和优化组件

保持组件的可扩展性是非常重要的，以及对外文档，在使用者使用组件的时候，一定是通过查看开发文档来实现组件操作的，不可能要求开发者去查看组件的源码调用，那样并不高效

借鉴 arco-design，开源社区，查看开发文档的书写案例

编写好的组件的过程

  1. 遵循组件设计的原则。遵守编写API规范

语义化命名：功能在名称中直观展示清晰明了

image.png

包名和组件名一致：

image.png

单独维护类型文件：

image.png

类名前缀统一：组件使用特殊且统一的类名前缀，尽量降低与用户类名冲突的可能性

接口定义：在为组件定义接口类型时，应继承原生DOM或基础组件属性，避免属性遗漏或重复声明

image.png

逻辑和样式分离：

image.png

如何制作组件定义？

使用 TypeScript。在 TypeScript 中，可以使用 extends 关键字继承原生 DOM 或基础组件的属性。例如，如果要为一个按钮组件定义类型，可以这样写：

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  // 添加组件自定义属性
  ...
}

ButtonProps 接口就继承了 React.ButtonHTMLAttributes 接口中定义的所有属性，包括 className、onClick 等。在定义组件时，就可以使用 ButtonProps 来指定组件的属性类型

实战设计组件

例子：

image.png

提取功能要点：

image.png

逻辑思路：

image.png

API定义：

image.png

核心实现：

image.png

引导组件

什么是引导组件？

  • 引导组件（Guided Tour Component）是一种常见的用户体验组件，用于向用户介绍应用程序的各种功能和特性。引导组件一般会以一系列步骤的形式展示，每个步骤会包含一些说明文本、图片、动画等，帮助用户快速了解应用程序的各种功能
  • 引导组件通常会在用户首次访问应用程序时自动触发，也可以由用户手动启动

如何支持用户直接控制引导步骤的跳转？

  1. 增加 API。可以在引导组件中增加一个 API，例如 goToStep(stepNumber: number)，用于跳转到指定步骤。用户可以在外部调用这个 API，实现直接跳转
  2. 增加事件。可以在引导组件中触发一个事件，例如 stepChange，用于在步骤切换时通知外部。用户可以监听这个事件，在外部处理相应的逻辑，例如显示当前步骤的编号、更新进度条等。
import React, { useState } from 'react';

function GuidedTour({ steps }) {
  const [currentStep, setCurrentStep] = useState(0);

  function goToStep(stepNumber) {
    setCurrentStep(stepNumber);
  }
  function handleNext() {
    setCurrentStep(currentStep + 1);
  }
  function handlePrev() {
    setCurrentStep(currentStep - 1);
  }

  return (
    <div>
      <h2>{steps[currentStep].title}</h2>
      <p>{steps[currentStep].content}</p>
      <button disabled={currentStep === 0} onClick={handlePrev}>
        Previous
      </button>
      <button
        disabled={currentStep === steps.length - 1}
        onClick={handleNext}
      >
        Next
      </button>
      <button onClick={() => goToStep(0)}>Go to Step 1</button>
      <button onClick={() => goToStep(1)}>Go to Step 2</button>
      <button onClick={() => goToStep(2)}>Go to Step 3</button>
    </div>
  );
}
  1. GuidedTour 组件接受一个 steps 属性，用于定义引导步骤
  2. 组件内部维护一个 currentStep 状态，表示当前所在的步骤
  3. 组件还提供了三个按钮，用于直接跳转到指定步骤。用户可以通过这些按钮直接控制引导步骤的跳转

如何支持用户透传Popover属性？

  1. 在组件的Props中定义一个名为"popoverProps"的对象类型属性，该属性的值为Popover组件的Props类型
  2. 在组件内部，将"popoverProps"作为Popover组件的Props进行传递即可
import React from 'react';
import PropTypes from 'prop-types';
import { Popover } from 'arco-design';

const MyComponent = ({ text, popoverProps }) => {
  return (
    <Popover {...popoverProps}>
      <div>{text}</div>
    </Popover>
  );
};

MyComponent.propTypes = {
  text: PropTypes.string.isRequired,
  popoverProps: PropTypes.object
};

export default MyComponent;

它接收Popover组件的Props类型。在组件的渲染方法中，我们将这个属性透传给Popover组件，这样就可以支持用户自定义Popover组件的属性了

什么是 Popover 属性？

"Popover" 属性指的是在弹出窗口中显示的内容和样式。在 React 组件开发中，Popover 属性通常与弹出框组件（如 Tooltip、Modal、Popover 等）相关联

avatar
文章
阅读
粉丝