H5选择器封装 - 技术栈

创建可重用和动态的组件对于构建交互式用户界面至关重要。本文将介绍React组件Selector（选择器）的封装过程。该组件旨在为用户提供动态选择界面，使其能够从预定义的选项中进行选择。

封装的目的

在本质上，"Selector"组件作为一个灵活且交互性强的选择器，使用户能够从预定义的选项列表中进行选择。

封装过程

导入依赖项

jsx 复制代码

import React, { useState } from "react";
import PropTypes from "prop-types";
import "./index.less";
import classnames from "classnames";

第一步我导入了"Selector"组件所需的依赖项。这些包括用于创建组件的React，用于在函数组件中管理状态的useState，用于定义属性类型的PropTypes，以及附加的样式和类名工具。

组件props设计

jsx 复制代码

const Selector = ({ className = '', options = [], value = [], onChange = () => {} }) => {
  // ...
};

"Selector"组件被定义为一个函数组件，接受几个属性 - className、options、value和onChange。

组件中的状态管理

jsx 复制代码

const [activeValue, setActiveValue] = useState([...value]);

在组件内部，使用useState钩子声明了状态变量activeValue。此状态跟踪选择器中当前选定的值。

处理点击事件

jsx 复制代码

const handleClick = (item) => {
  setActiveValue([item.value]);
  onChange([item.value]);
};

"handleClick"函数负责在用户单击选择器项时更新状态。它将activeValue设置为所选项的值，并触发onChange回调，允许外部处理所选值。

渲染组件

jsx 复制代码

return (
  <div className={`${className} hc-selector`}>
    {options.map((item, index) => (
      <div
        key={index}
        className={classnames("hc-selector-item", {
          "hc-selector-item__active": activeValue.includes(item.value)
        })}
        onClick={() => handleClick(item)}
        role="button"
      >
        {item.label}
      </div>
    ))}
  </div>
);

渲染基于提供的options的选择器项。每个项都显示为可点击的div元素，并且其外观根据是否为当前选定项而动态调整（使用"hc-selector-item__active"类）。

定义PropTypes

jsx 复制代码

Selector.propTypes = {
  className: PropTypes.string,
  options: PropTypes.array,
  value: PropTypes.array,
  onChange: PropTypes.func
};

为了增强代码的健壮性，使用PropTypes定义了每个属性的预期类型。这有助于在开发过程中捕获潜在问题。

导出组件

jsx 复制代码

export default Selector;

最后，导出"Selector"组件，使其可在应用程序的其他部分中使用。

小结

总而言之，"Selector"组件是一种灵活且动态的工具，可在React应用程序中引入用户交互。通过了解其目的、结构和功能，开发人员可以运用此组件，为用户提供流畅且直观的选择体验。

附录 -- 整体代码

js 复制代码

import React, { useState } from "react";
import PropTypes from "prop-types";
import "./index.less";
import classnames from "classnames";

const Selector = ({ className = '', options = [], value = [], onChange = () => {} }) => {
  const [activeValue, setActiveValue] = useState([...value]);

  const handleClick = (item) => {
    setActiveValue([item.value]);
    onChange([item.value]);
  };

  return (
    <div className={`${className} hc-selector`}>
      {options.map((item, index) => (
        <div
          key={index}
          className={classnames("hc-selector-item", {
            "hc-selector-item__active": activeValue.includes(item.value)
          })}
          onClick={() => handleClick(item)}
          role="button"
        >
          {item.label}
        </div>
      ))}
    </div>
  );
};

Selector.propTypes = {
  className: PropTypes.string,
  options: PropTypes.array,
  value: PropTypes.array,
  onChange: PropTypes.func
};

export default Selector;