React Suite Cascader ts:ItemDataType Prop

React Suite 是一个用于开发 中级设计 和 后端产品 的React组件前端库。它帮助开发人员提供了一个平滑的开发体验，减少了开发工作量。在本文中，我们将学习React Suite的 Cascader 组件，使用 ItemDataType 作为 prop 。

Cascader组件用于选择具有 层次关系 的数据之间的值。ts:ItemDataType prop帮助选择将出现在级联层次数据下的项目列表。它在属性中使用，例如 data*** ， **getChildren ， onSelect ， renderMenu ， renderMenuItem ， renderSearchItem 和 renderValue 。它被分配为一个对象，其中包含各种字段，如 label ， value 和 children ，其中包含嵌套组件。

ts:ItemDataType Props:

Value: 它是级联层次列表，我们必须从中选择所需的项目。
Label: 此值与 labelKey 相关联，并显示类似于 Value 的数据。
Children: 它是 ItemDataType 的可选属性。它包含 Value 或 label 的子级 ItemDataTypes 。
groupBy: 它可以将Cascader分类为多个类似的组。
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： 在创建好项目文件夹（即文件夹名称）后，使用以下命令进入该目录：

cd foldername

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

npm install rsuite

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

React Suite Cascader ts:ItemDataType Prop

示例1： 在这个示例中，我们将使用 Cascader 组件的 ItemDataType 属性，看看 ts:ItemDataType 的语法是什么。在变量名 data 中，我们存储了一个名字列表，以数组的形式呈现。数组中的每个元素都是一个对象，包含3个键，即、和，它们各自被赋予了所需的值。在 App 函数下，我们将使用 Cascader 标签，并将一个类型为ItemData的数据属性赋给它。输出中，我们可以看到一个下拉菜单中包含了这些名字。

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

import "rsuite/dist/rsuite.css";
import React from 'react'
import { Cascader } from 'rsuite';
 
const App = () => {
 
    // Sample Options
    const data = [
        {
            "label": "DSA",
            "value": 1,
            "children": [
                {
                    "label": "Basic",
                    "value": 2
                },
                {
                    "label": "Advance",
                    "value": 3,
                    "children": [
                        {
                            "label": "DP",
                            "value": 4
                        },
                        {
                            "label": "Graph",
                            "value": 5
                        },
                        {
                            "label": "Fenwick Tree",
                            "value": 6
                        },
                    ]
                },
            ]
        }
    ]
 
    return (
        <center>
            <div style={{
                display: 'block', width: 600, paddingLeft: 30
            }}>
                <h3>Geeks For Geeks</h3>
                <h4>Cascader Component</h4>
                <Cascader
                    style={{ width: 300 }}
                    placeholder="Select Your Favourite DSA Topic"
                    data={data}
                />
            </div>
        </center>
 
    );
}
 
export default App;

运行程序的步骤：

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

npm start

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

React Suite Cascader ts:ItemDataType Prop

示例2： 在这个示例中，我们将使用 Cascader 组件的 ItemDataType 属性，在 ts:ItemDataType 中我们将看到 disabled 选项。在 data 变量中，我们存储了一个以数组形式的名称列表。数组中的每个元素都是一个包含3个键（即、和）的对象，每个键都被赋予所需的值。在 App 函数下，我们将使用两个级联标签。第一个级联标签设置为 disabled ，使用 disabled 关键字，第二个级联标签是默认的级联列表，其中将 data prop 分配给它，该prop是 ItemData 类型。在输出中，我们可以看到一个下拉菜单，其中包含名称。

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

import "rsuite/dist/rsuite.css";
import React from 'react'
import { Cascader } from 'rsuite';
const App = () => {
 
    // Sample Options
    const data = [
        {
            "label": "DSA",
            "value": 1,
            "children": [
                {
                    "label": "Basic",
                    "value": 2
                },
                {
                    "label": "Advance",
                    "value": 3,
                    "children": [
                        {
                            "label": "DP",
                            "value": 4
                        },
                        {
                            "label": "Graph",
                            "value": 5
                        },
                        {
                            "label": "Fenwick Tree",
                            "value": 6
                        },
                    ]
                },
            ]
        }
    ]
 
    return (
        <center>
            <div style={{
                display: 'block', width: 600, paddingLeft: 30
            }}>
                <h3>Geeks For Geeks</h3>
                <h4>Cascader Component</h4>
                <Cascader disabled
                    style={{ width: 300 }}
                    placeholder="Select Your Favourite DSA Topic"
                    data={data}
                />
 
                <Cascader
                    style={{ paddingTop: '23px', width: 300 }}
                    placeholder="Select Your Favourite DSA Topic"
                    data={data}
                />
            </div>
        </center>
 
    );
}
 
export default App;

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