{"id":546,"date":"2026-06-29T17:12:44","date_gmt":"2026-06-29T09:12:44","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=546"},"modified":"2026-06-29T17:13:41","modified_gmt":"2026-06-29T09:13:41","slug":"react-org-tree%e5%b1%9e%e6%80%a7%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2026\/06\/29\/react-org-tree%e5%b1%9e%e6%80%a7%e6%8f%92%e4%bb%b6\/","title":{"rendered":"react-org-tree\u5c5e\u6027\u63d2\u4ef6"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;github.com\/artdong\/react-org-tree<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># use npm\nnpm i react-org-tree\n\n# use yarn\nyarn add react-org-tree<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f7f\u7528<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>import OrgTree from 'react-org-tree';\n\nconst horizontal = false; \/\/ true\uff1a\u6a2a\u5411  false\uff1a\u7eb5\u5411\nconst collapsable = true; \/\/ true\uff1a\u53ef\u6298\u53e0 false\uff1a\u4e0d\u53ef\u6298\u53e0 \nconst expandAll = true; \/\/ true: \u5168\u90e8\u5c55\u5f00 false\uff1a\u5168\u90e8\u6298\u53e0 \n\nconst data = {\n    id: 0,\n    label: 'XXX\u80a1\u4efd\u6709\u9650\u516c\u53f8',\n    children: &#91;{\n        id: 1,\n        label: '\u6280\u672f\u90e8',\n        children: &#91;{\n            id: 4,\n            label: '\u540e\u7aef\u5de5\u7a0b\u5e08'\n        }, {\n            id: 5,\n            label: '\u524d\u7aef\u5de5\u7a0b\u5e08'\n        }, {\n            id: 6,\n            label: '\u8fd0\u7ef4\u5de5\u7a0b\u5e08'\n        }]\n    }, {\n        id: 2,\n        label: '\u4eba\u4e8b\u90e8'\n    }, {\n        id: 3,\n        label: '\u9500\u552e\u90e8'\n    }]\n}\n\n&lt;OrgTree\n    data={data}\n    horizontal={horizontal}\n    collapsable={collapsable}\n    expandAll={expandAll}\n&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u6548\u679c<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"883\" height=\"350\" src=\"https:\/\/mitongxue.cn\/wp-content\/uploads\/2026\/06\/image-70.png\" alt=\"\" class=\"wp-image-548\" srcset=\"https:\/\/mitongxue.cn\/wp-content\/uploads\/2026\/06\/image-70.png 883w, https:\/\/mitongxue.cn\/wp-content\/uploads\/2026\/06\/image-70-300x119.png 300w, https:\/\/mitongxue.cn\/wp-content\/uploads\/2026\/06\/image-70-768x304.png 768w\" sizes=\"auto, (max-width: 883px) 100vw, 883px\" \/><\/figure>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4f7f\u7528 \u6548\u679c<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,11],"tags":[28],"class_list":["post-546","post","type-post","status-publish","format-standard","hentry","category-react-","category-front","tag-react"],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"author_info":{"info":["\u9648 \u67d0\u4eba"]},"category_info":"<a href=\"https:\/\/mitongxue.cn\/index.php\/category\/front\/react-%e5%89%8d%e7%ab%af\/\" rel=\"category tag\">React<\/a> <a href=\"https:\/\/mitongxue.cn\/index.php\/category\/front\/\" rel=\"category tag\">\u524d\u7aef<\/a>","tag_info":"\u524d\u7aef","comment_count":"0","_links":{"self":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/comments?post=546"}],"version-history":[{"count":1,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/546\/revisions"}],"predecessor-version":[{"id":550,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/546\/revisions\/550"}],"wp:attachment":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/media?parent=546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/categories?post=546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/tags?post=546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}