npm 包 react-category-jd 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

react-category-jd 是一个层次分类组件，可以让用户方便地选择多个分类项。react-category-jd 针对京东的分类展示进行了优化，界面美观且易于使用。

安装

npm install --save react-category-jd

使用

导入

import React from 'react';
import Category from 'react-category-jd';

基础用法

<Category data={data} onChange={handleChange} />

data 是必需的，它是一个数组，每个元素都是一个分类对象。分类对象的格式为：

-- -------------------- ---- -------
-
  --- ----
  ----- -----
  --------- -
    - --- ------ ----- ---- --
    - --- ------ ----- ---- --
    - --- ------ ----- -------- --
    - --- ------ ----- ---- --
  --
--

id 是分类唯一标识符，name 是分类名称，children 是子分类数组，子分类也是一个分类对象。

onChange 是分类选中事件的回调函数，它接受一个参数 selected，该参数是一个选中的分类对象数组。例如：

function handleChange(selected) {
  console.log(selected);
}

高级用法

自定义样式

-- -------------------- ---- -------
---------
  -----------
  -----------------------
  --------
    ------- ---- ----- ------
    -------- -------
    ------------- ------
  --
  -----------------------
  ------------
    ------ -------
  --
  ----------------
    ------ ------
    ---------------- ----------
    ----------- -------
  --
--

组件提供了三个样式属性：

style 是组件的样式，可以设置边框、内边距等；
className 是组件的类名，可以自定义组件的样式；
itemStyle 是分类项的样式，可以设置分类项的字体颜色、背景色等；
selectedStyle 是选中分类项的样式，可以设置选中分类项的字体颜色、背景色等。

联动选择

<Category
  data={data}
  onChange={handleChange}
  selected={selected}
  linked
/>

selected 是用于控制选中状态的数组，每个元素都是选中的分类对象。例如：

const selected = [
  data[0],
  data[0].children[0],
];

linked 是用于控制联动选择的开关，默认为 false，开启后选择某个分类会级联更新其父分类和子分类的选中状态。

示例代码

-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- --------------------

----- ---- - -
  -
    --- ----
    ----- -----
    --------- -
      - --- ------ ----- ---- --
      - --- ------ ----- ---- --
      - --- ------ ----- -------- --
      - --- ------ ----- ---- --
    --
  --
  -
    --- ----
    ----- -----
    --------- -
      - --- ------ ----- ---- --
      - --- ------ ----- ---- --
      - --- ------ ----- ---- --
      - --- ------ ----- ---- --
    --
  --
--

-------- ----- -
  -------- ---------------------- -
    ----------------------
  -

  ------ -
    ---- ----------------
      --------- ----------- ----------------------- --
    ------
  --
-

------ ------- ----

总结

react-category-jd 是一个方便易用的层次分类组件，可以快速实现多级分类选择功能。它支持自定义样式和联动选择，为开发者提供了更好的定制化和使用体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005752581e8991b448ea41c