{"id":19647103,"url":"https://github.com/lanif-ui/react-category-jd","last_synced_at":"2026-05-10T13:01:41.061Z","repository":{"id":65372663,"uuid":"117936436","full_name":"LANIF-UI/react-category-jd","owner":"LANIF-UI","description":"react 仿京东手机端分类组件","archived":false,"fork":false,"pushed_at":"2018-02-01T01:39:06.000Z","size":403,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-09T21:54:13.257Z","etag":null,"topics":["category","jd","react-component"],"latest_commit_sha":null,"homepage":"https://lanif-ui.github.io/react-category-jd/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LANIF-UI.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-18T05:24:33.000Z","updated_at":"2018-01-19T14:49:34.000Z","dependencies_parsed_at":"2023-06-07T21:45:34.690Z","dependency_job_id":null,"html_url":"https://github.com/LANIF-UI/react-category-jd","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LANIF-UI%2Freact-category-jd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LANIF-UI%2Freact-category-jd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LANIF-UI%2Freact-category-jd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LANIF-UI%2Freact-category-jd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LANIF-UI","download_url":"https://codeload.github.com/LANIF-UI/react-category-jd/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240953651,"owners_count":19884052,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["category","jd","react-component"],"created_at":"2024-11-11T14:42:31.740Z","updated_at":"2026-05-10T13:01:36.012Z","avatar_url":"https://github.com/LANIF-UI.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-category-jd\n---\n\nreact 仿京东手机端分类组件.\n\n[![NPM version][npm-image]][npm-url]\n[![gemnasium deps][gemnasium-image]][gemnasium-url]\n[![node version][node-image]][node-url]\n[![npm download][download-image]][download-url]\n\n[npm-image]: http://img.shields.io/npm/v/react-category-jd.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/react-category-jd\n[travis-image]: https://img.shields.io/travis/react-component/react-category-jd.svg?style=flat-square\n[travis-url]: https://travis-ci.org/react-component/react-category-jd\n[coveralls-image]: https://img.shields.io/coveralls/react-component/react-category-jd.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/react-component/react-category-jd?branch=master\n[gemnasium-image]: http://img.shields.io/gemnasium/react-component/react-category-jd.svg?style=flat-square\n[gemnasium-url]: https://gemnasium.com/react-component/react-category-jd\n[node-image]: https://img.shields.io/badge/node.js-%3E=_0.11-green.svg?style=flat-square\n[node-url]: http://nodejs.org/download/\n[download-image]: https://img.shields.io/npm/dm/react-category-jd.svg?style=flat-square\n[download-url]: https://npmjs.org/package/react-category-jd\n## install\n\n[![react-category-jd](https://nodei.co/npm/react-category-jd.png)](https://npmjs.org/package/react-category-jd)\n\u003cbr /\u003e\n![](https://ucarecdn.com/391169cb-3ccb-4744-97c0-95087fd9037f/reactcategoryjd.gif)\n## Usage\n\n```js\nimport ReactDOM from 'react-dom';\nimport CategoryJD from 'react-category-jd';\n\nconst dataSource = Array(20).fill(0).map((_, index) =\u003e (\n  {\n    title: `汽车用品${index}`,\n    path: '/abc',\n    image:\n      '//img13.360buyimg.com/mcoss/jfs/t13768/304/553456768/42679/21bc3c35/5a28f1c1N226249b0.jpg',\n    children: [{\n      title: `热卖推荐${index}`,\n      children: [\n        { title: `汽车坐垫${index}`, path: '/abc', image: '//img20.360buyimg.com/focus/jfs/t13861/165/1416050485/4023/7a99270b/5a1fb902N806b102c.jpg' },\n        { title: `行车记录仪${index}`, path: '/abc', image: '//img30.360buyimg.com/focus/jfs/t12901/240/1394851486/8943/454985f7/5a1fb8fcNb81047cc.jpg' },\n        { title: `机油${index}`, path: '/abc', image: '//img13.360buyimg.com/focus/jfs/t12934/187/1360887703/3624/2773362c/5a1fb8f6N7d4de465.jpg' },\n        { title: `洗车水枪${index}`, path: '/abc', image: '//img12.360buyimg.com/focus/jfs/t12775/362/1793763591/8646/9054789/5a28b10cN62861b9b.jpg' },\n        { title: `应急救援${index}`, path: '/abc', image: '//img14.360buyimg.com/focus/jfs/t15556/93/149991245/6163/3387b1e9/5a28b106N59344f7a.png' },\n      ],\n    }, {\n      title: `全新整车${index}`,\n      children: [\n        { title: `微型车${index}`, path: '/abc', image: '//img12.360buyimg.com/focus/jfs/t12337/75/1409309351/5500/b04a2642/5a1fb8eeN05d4163e.jpg' },\n        { title: `小型车${index}`, path: '/abc', image: '//img12.360buyimg.com/focus/jfs/t13081/260/1376706334/6999/c4bff110/5a1fb8e9Nd2feb53d.jpg' },\n        { title: `紧凑型车${index}`, path: '/abc', image: '//img11.360buyimg.com/focus/jfs/t13072/223/1436827028/5429/ae4f87d0/5a1fb8e2N6eba4559.jpg' },\n        { title: `中型车${index}`, path: '/abc', image: '//img11.360buyimg.com/focus/jfs/t15643/17/110288415/4137/d6db0406/5a28b0f9N900e6ad6.jpg' },\n        { title: `SUV${index}`, path: '/abc', image: '//img20.360buyimg.com/focus/jfs/t12709/19/1797741968/5030/aa3b63bd/5a28b0f0N5541a6c1.jpg' },\n        { title: `中大型车${index}`, path: '/abc', image: '//img10.360buyimg.com/focus/jfs/t15643/11/99628246/3283/c304231f/5a28b0f5N74773599.jpg' },\n      ],\n    }, {\n      title: `热卖推荐${index}`,\n      children: [\n        { title: `汽车坐垫${index}`, path: '/abc', image: '//img20.360buyimg.com/focus/jfs/t13861/165/1416050485/4023/7a99270b/5a1fb902N806b102c.jpg' },\n        { title: `行车记录仪${index}`, path: '/abc', image: '//img30.360buyimg.com/focus/jfs/t12901/240/1394851486/8943/454985f7/5a1fb8fcNb81047cc.jpg' },\n        { title: `机油${index}`, path: '/abc', image: '//img13.360buyimg.com/focus/jfs/t12934/187/1360887703/3624/2773362c/5a1fb8f6N7d4de465.jpg' },\n        { title: `洗车水枪${index}`, path: '/abc', image: '//img12.360buyimg.com/focus/jfs/t12775/362/1793763591/8646/9054789/5a28b10cN62861b9b.jpg' },\n        { title: `应急救援${index}`, path: '/abc', image: '//img14.360buyimg.com/focus/jfs/t15556/93/149991245/6163/3387b1e9/5a28b106N59344f7a.png' },\n      ],\n    }],\n  }\n));\n\nReactDOM.render(\u003cCategoryJD dataSource={dataSource} /\u003e, container);\n```\n\n## API\n\n### props\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n    \u003cthead\u003e\n      \u003ctr\u003e\n        \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n        \u003cth\u003edescription\u003c/th\u003e\n      \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003ctd\u003eprefixCls\u003c/td\u003e\n        \u003ctd\u003eString\u003c/td\u003e\n        \u003ctd\u003ecategory-layout\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003eclassName\u003c/td\u003e\n        \u003ctd\u003eString\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003ctd\u003e跟节点class\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003edataSource\u003c/td\u003e\n        \u003ctd\u003earray\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003ctd\u003e数据源\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003elink\u003c/td\u003e\n        \u003ctd\u003enode\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003ctd\u003e可指定用react-router的Link做为跳转组件，默认为a标签\u003c/td\u003e\n      \u003ctr\u003e\n        \u003ctd\u003eonChange\u003c/td\u003e\n        \u003ctd\u003eFunction\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003ctd\u003e如果设置onChange后，不会走path跳转，需要手动执行相应逻辑\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003ealias\u003c/td\u003e\n        \u003ctd\u003eobject\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003ctd\u003e可以指定title, path, image, children的别名，如alias={title: 'name', path: 'url'}\u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Development\n\n```\nnpm install\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flanif-ui%2Freact-category-jd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flanif-ui%2Freact-category-jd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flanif-ui%2Freact-category-jd/lists"}