树形控件+自定义图片+收藏渲染与取消

import { useEffect, useState } from "react";
import { Tree } from "antd";
import { PlayCircleOutlined, DownOutlined } from "@ant-design/icons";
import JianKongImg from "./assets/images/icon_jk.png";
import ShouCangImg from "./assets/images/icon_sc.png";
import ShouCangImg2 from "./assets/images/icon_sc_2.png";
import "./App.css";

const { TreeNode } = Tree;

function App() {
  const treeData = [
    {
      title: "parent 1",
      key: "0-0",
      children: [
        {
          title: "parent 1-0",
          key: "0-0-0",
          imgSrc: [ShouCangImg, JianKongImg, ShouCangImg2],
          children: [
            {
              title: "leaf",
              key: "0-0-0-0",
              imgSrc: [ShouCangImg, JianKongImg, ShouCangImg2],
            },
            {
              title: "leaf",
              key: "0-0-0-1",
              imgSrc: [ShouCangImg, JianKongImg, ShouCangImg2],
            },
            {
              title: "leaf",
              key: "0-0-0-2",
              imgSrc: [ShouCangImg, JianKongImg, ShouCangImg2],
            },
          ],
        },
        {
          title: "parent 1-1",
          key: "0-0-1",
          imgSrc: [ShouCangImg, JianKongImg, ShouCangImg2],
          children: [
            {
              title: "leaf",
              key: "0-0-1-0",
              imgSrc: [ShouCangImg, JianKongImg, ShouCangImg2],
            },
          ],
        },
        {
          title: "parent 1-2",
          key: "0-0-2",
          imgSrc: [ShouCangImg, JianKongImg, ShouCangImg2],
          children: [
            {
              title: "leaf",
              key: "0-0-2-0",
              imgSrc: [ShouCangImg, JianKongImg, ShouCangImg2],
            },
            {
              title: "leaf",
              key: "0-0-2-1",
              imgSrc: [ShouCangImg, JianKongImg, ShouCangImg2],
            },
          ],
        },
      ],
    },
  ];
  const [shoucang, setShouCang] = useState([]); //收藏列表

  const [selectedKeys, setSelectedKeys] = useState([]);
  const [count, setcount] = useState(0);
  const onSelect = (selectedKeys, info) => {
    console.log("selected", selectedKeys, info);
    // setSelectedKeys(selectedKeys);
  };
  const handleImgClick = (e, key) => {
    e.stopPropagation(); // 阻止事件冒泡，避免触发上层节点的 onSelect 事件
    setSelectedKeys([key]);
    let newSelectedKeys;
    if (selectedKeys.some((item) => item === key)) {
      // 如果已经选中了，则取消选中
      newSelectedKeys = selectedKeys.filter((k) => k !== key);
    } else {
      // 如果未选中，则添加到选中列表中
      newSelectedKeys = [...selectedKeys, key];
    }
    setSelectedKeys(newSelectedKeys);
    console.log("收藏", e, key);

    const node = findNodeByKey(treeData, key);
    if (!node) return;

    // 如果已经收藏了，则取消收藏
    if (shoucang.some((item) => item.key === key)) {
      setShouCang(shoucang.filter((item) => item.key !== key));
    } else {
      // 如果未收藏，则添加到收藏列表中
      setShouCang([...shoucang, node]);
    }
  };

  // 递归查找树节点
  const findNodeByKey = (data, key) => {
    for (let i = 0; i < data.length; i++) {
      const item = data[i];
      if (item.key === key) {
        return item;
      } else if (item.children) {
        const node = findNodeByKey(item.children, key);
        if (node) return node;
      }
    }
    return null;
  };

  // 渲染收藏列表
  const renderShoucangList = () => {
    return shoucang.map((item) => (
      <ul className="sc-list" key={item.key}>
        <li>
          <img src={item.imgSrc[1]} alt="" />
        </li>
        <li>{item.title}</li>
        <li>
          <img
            src={ShouCangImg}
            alt=""
            onClick={(e) => handleImgClick(e, item.key)}
          />
        </li>
      </ul>
    ));
  };

  function renderTreeNodes(data) {
    return data.map((item) => {
      const { title, imgSrc, children, key } = item;

      const isSelected = selectedKeys.includes(key);
      // const isSelected = selectedKeys.splice(key);

      return (
        <TreeNode
          icon={<PlayCircleOutlined />}
          title={
            <span>
              {imgSrc && (
                <img
                  src={imgSrc[1]}
                  alt=""
                  style={{ marginLeft: 8, maxWidth: 24 }}
                />
              )}
              {title}
              {imgSrc && (
                <img
                  onClick={(e) => handleImgClick(e, key)}
                  src={isSelected ? imgSrc[0] : imgSrc[2]}
                  alt=""
                  style={{ marginLeft: 8, Width: 20, height: 20 }}
                />
              )}
            </span>
          }
          key={key}
          onClick={() => onSelect([key])}
        >
          {children && renderTreeNodes(children)}
        </TreeNode>
      );
    });
  }
  // useEffect(() => {
  //   console.log(selectedKeys, "要渲染的值");
  //   let SCguolv = treeData.key;
  //   setShouCang(SCguolv);
  // }, [selectedKeys]);
  return (
    <div id="box">
      <div id="left">
        <Tree
          id="tree-box"
          showLine
          switcherIcon={<DownOutlined />}
          defaultExpandedKeys={["0-0-0", "0-0-1"]}
          onSelect={onSelect}
        >
          {renderTreeNodes(treeData)}
        </Tree>
      </div>
      <div id="right">{renderShoucangList()}</div>
    </div>
  );
}

export default App;

#box{
  width: 100vw;
  height: 100vh;
  position: relative;
  background-color: dimgray;
}

#left{
  
  width: 463px;
  height: 417px;
  position: absolute;
  top: 200px;
  left: 400px;
  background-color: lightseagreen;
}

#right{
  
  width: 463px;
  height: 417px;
  position: absolute;
  top: 200px;
  right: 400px;
  background-color: lightseagreen;
 
}
#right>.sc-list{
  width: 463px;
  padding: 0;
  display: flex;
  justify-content:center;
  align-items: center;
  list-style: none; /* 取消默认的列表样式 */
}
#right>.sc-list>li{
  width: 40px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  /* border: 1px solid red; */
}

#right>.sc-list>li:nth-of-type(2){
  width: 200px;
  text-align: start;
}
#right>.sc-list>li:nth-of-type(3){
  width: 180px;
  text-align: end;
}
.ant-tree {
   background-color:lightseagreen ;
   overflow-y: scroll;
   overflow-x: hidden;
   /* 隐藏默认的滚动条 */

}
::-webkit-scrollbar {
  width: 4px;
  height: 0;
}

/* 定义滚动条轨道的样式 */
::-webkit-scrollbar-track {
  background-color: lightseagreen;
}

/* 定义滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background-color: #ce0b0b;
  border-radius: 10px;
}
/* 定义滚动条滑块悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #a1a1a1;
}