React Suite CheckPicker ts:ItemDataType 属性

React Suite 是一个用于开发中等设计和后端产品的React组件前端库。它可以帮助开发人员提供平滑的开发体验，并减少开发工作量。本文将介绍React Suite中的 CheckPicker 组件，并使用 ItemDataType 作为使用的 prop 。

CheckPicker 组件用于从下拉列表中选择多个值，并允许分组。ts:ItemDataType prop用于选择在 CheckPicker 列表下出现的项目列表。它在诸如 data*** 、 **onSelect 、 renderMenuGroup 和 renderValue 等属性下使用。它以数组的形式分配，并通过 Map() 函数重新创建，以纠正其语法。

ts:ItemDataType Props：

Value： 这是要选择的checkpicker列表的项目列表。
Label： 此值与 labelKey 关联，并显示类似于 Value 的数据。
Children： 这是 ItemDataType 的可选属性。它包括 Value 或 label 的子ItemDataTypes。
groupBy： 它有助于将CheckPicker分类为多个类似的组。
Loading： 这是一个可选属性，与 cascader 和 multicascader 一起使用。

语法：

interface ItemDataType {
      value: string;
      label: ReactNode;
      children?: ItemDataType[];
      groupBy?: string;
      loading?: boolean;
}

设置React应用：

步骤1： 使用以下命令创建一个React.js应用：

npx create-react-app foldername

步骤2： 创建项目文件夹，比如文件夹名为 foldername，使用以下命令进入该目录：

cd foldername

步骤3： 创建ReactJS应用程序之后，使用以下命令安装所需的模块：

npm install rsuite

项目结构： 项目的结构将如下所示：

React Suite CheckPicker ts:ItemDataType 属性

示例1： 在这个示例中，我们将使用 CheckPicker 组件和 ItemDataType 属性，其中我们将看到 ts:ItemDataType 的语法。在变量名称 data 中，我们正在存储一个名字列表，以数组形式存在。创建的数组 重新创建 ，使用 Map() 函数提供 ItemDataType 的语法，从而重新分配 items ，在 label 和 value 属性中。在 App 函数下面，我们将使用 CheckPicker 标签，其 data 属性分配给它，其类型为 ItemData 。在输出中，我们可以看到一个下拉菜单，其中包含名字。

App.js： 将以下代码写入App.js文件中，其中App是React提供的默认组件，在其中编写代码。

import React, { useState } from "react"; 
import "rsuite/dist/rsuite.css"; 
import { CheckPicker } from 'rsuite'; 
  
const data = [ 
    'Arushi', 
    'Gautam', 
    'Radha', 
    'Krishna', 
    'Sita', 
    'Rama'
].map(item => ({ label: item, value: item })); 
  
const App = () => { 
    return ( 
        <center> 
            <h3>GeeksForGeeks</h3> 
            <h4>Checkbox component</h4> 
            <br /> 
            <CheckPicker data={data} style={{ width: 224 }} /> 
        </center> 
    ); 
}; 
  
  
export default App;

运行程序的步骤： 从项目的根目录执行以下命令来运行应用程序：

npm start

输出： 您的web应用将在“http://localhost:3000”上运行。现在，您将看到以下输出：

React Suite CheckPicker ts:ItemDataType 属性

示例2： 在此示例中，我们将使用 CheckPicker 组件与 ItemDataType 属性，我们将看到在 ItemDataType 中使用变量/数字的用法。在变量名称 data 中，我们存储了一个大小为 100 的数组，其中项目数据为 gfg0，gfg1，gfg2 等。在 App 函数下，我们将使用 CheckPicker 标记，其中分配了一个类型为 ItemData 的数据属性。在输出中，我们可以看到一个下拉菜单中包含了这些名称。

App.js： 将以下代码写入App.js文件中，其中App是我们在其中编写代码的默认组件。

import React, { useState } from "react"; 
import "rsuite/dist/rsuite.css"; 
import { CheckPicker } from 'rsuite'; 
  
const data = Array.from({ length: 100 }).map((_, index) => { 
    return { 
        label: `gfg  ${index}`, value: `gfg$ {index}` 
    }; 
}); 
  
const App = () => { 
    return ( 
        <center> 
            <h3>GeeksForGeeks</h3> 
            <h4>Checkbox component</h4> 
            <br /> 
            <CheckPicker data={data} style={{ width: 224 }} /> 
        </center> 
    ); 
}; 
  
  
export default App;

运行程序的步骤： 要运行应用程序，请从项目的根目录执行以下命令：