实现一个简单的树形 (Tree) 组件，支持展开、折叠和选择

推荐答案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本题详细解读

1. TreeNode 类

• value: 存储节点的值。
• children: 存储子节点的数组。
• isExpanded: 控制节点是否展开。
• isSelected: 控制节点是否被选中。
• toggleExpand(): 切换节点的展开状态。
• toggleSelect(): 切换节点的选中状态。
• addChild(child): 添加子节点。

2. Tree 类

• root: 树的根节点。
• render(): 渲染树结构。
  • renderNode(node): 递归渲染每个节点。
    • 创建节点元素并设置样式。
    • 如果节点被选中，设置背景色。
    • 添加点击事件以切换选中状态。
    • 如果有子节点，添加展开/折叠按钮。
    • 如果节点展开，递归渲染子节点。

3. 使用示例

• 创建一个根节点为 "Root" 的树。
• 添加两个子节点 "Child 1" 和 "Child 2"。
• 为每个子节点添加一个孙子节点。
• 调用 render() 方法渲染树结构。

4. 关键点

• 递归渲染: 使用递归来渲染树的每个节点。
• 事件处理: 通过事件监听器处理节点的展开、折叠和选中操作。
• 动态更新: 每次操作后重新渲染树以反映状态变化。

5. 扩展性

• 可以进一步扩展树的功能，如支持多选、拖拽、异步加载子节点等。
• 可以通过 CSS 进一步美化树的样式。