玩转 React 渲染函数：组件封装——动态下拉框（上）

前端

2023-10-13 02:22:05

首先，让我们来一睹为快：

[效果展示]

正如你所见，这个下拉框组件在两种常见的场景中发挥了重要作用：

表格过滤： 根据项目过滤数据。
表单使用： 基于项目创建单据。

组件用例

为了更好地理解组件的功能，我们先来看几个用例：

格式化选项数据
自定义选项数据
...（更多用例稍后展示）

组件封装

为了更方便地使用这个下拉框组件，我们可以将其封装成一个独立的组件，这样就可以在不同的场景中复用了。

封装步骤

创建一个新的文件，比如 DynamicSelect.js。
在文件中定义一个函数组件，比如：

import React, { useState } from "react";

const DynamicSelect = ({ options, value, onChange }) => {
  const [selectedValue, setSelectedValue] = useState(value);

  const handleChange = (e) => {
    setSelectedValue(e.target.value);
    onChange(e.target.value);
  };

  return (
    <select value={selectedValue} onChange={handleChange}>
      {options.map((option) => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
};

export default DynamicSelect;

在需要使用下拉框组件的地方，就可以直接引入并使用了：

import DynamicSelect from "./DynamicSelect";

const MyComponent = () => {
  const options = [{ value: "1", label: "Option 1" }, ...];

  return (
    <DynamicSelect options={options} value={selectedValue} onChange={handleChange} />
  );
};

这样，我们就可以轻松地在不同的场景中复用下拉框组件了。

自定义选项数据

下拉框组件支持自定义选项数据，可以满足不同的数据展示需求。

const options = [
  { value: "1", label: "Option 1" },
  { value: "2", label: "Option 2", disabled: true },
  { value: "3", label: <span>Option 3</span> },
];

格式化选项数据

下拉框组件还提供了格式化选项数据的功能，可以根据需要对选项数据进行格式化处理。

const formatOptionLabel = (option) => {
  return `${option.label} (${option.value})`;
};

const options = [
  { value: "1", label: "Option 1" },
  { value: "2", label: "Option 2" },
];

// ...

<DynamicSelect options={options} formatOptionLabel={formatOptionLabel} />