react手写树形菜单

参考视频

const Tree = ({ data }) => (
    <ul className={styles.tree}>
      {data?.map((item) => {
        return (
          <li className={`${styles.treeItem} ${styles[item.open]}`} key={item?.id}>
            <div
              className={
                item.checked ? `${styles.itemContent} ${styles.checked}` : styles.itemContent
              }
              onMouseEnter={() => {
                clearRoot(rootData, 'hover');
                item.hover = true;
                setRoot([...rootData]);
              }}
              onMouseLeave={() => {
                clearRoot(rootData, 'hover');
                setRoot([...rootData]);
              }}
              onClick={() => {
                if (item.open !== '') {
                  if (item.open == 'open') {
                    item.open = 'close';
                  } else {
                    item.open = 'open';
                  }
                }
                // console.log(item);
                clearRoot(rootData, 'check');
                item.checked = true;
                setRoot([...rootData]);
              }}
            >
              <div className={styles.titleBox}>
                <Spread open={item.open} onClick={() => {}} />
                <div className={styles.title}>
                  {searchValue ? (
                    <div style={{ whiteSpace: 'nowrap' }}>
                      {item.name.split(searchValue)[0]}
                      {(item.name.indexOf(searchValue) > -1 ||
                        PinyinMatch.match(item.name, searchValue)) && (
                        <span style={{ color: 'red' }}>{searchValue}</span>
                      )}
                      {item.name.split(searchValue)[1]}
                    </div>
                  ) : (
                    item.name
                  )}
                </div>
                {!initData.some((i) => `${i.id}` === `${item.id}`) && (
                  <div
                    className={styles.subscribed}
                    onClick={(e) => {
                      e.stopPropagation();
                      item.subscribed = true;
                      setRoot([...rootData]);
                    }}
                  >
                    {!item.subscribed && item.hover && (
                      <Tooltip placement="top" title="订阅">
                        <PlusOutlined style={{ fontSize: '16px', color: '#1677ff' }} />
                      </Tooltip>
                    )}
                    {item.subscribed && (
                      <Tooltip placement="top" title="已订阅">
                        <CheckOutlined style={{ fontSize: '16px', color: 'rgba(0,0,0,0.45)' }} />
                      </Tooltip>
                    )}
                  </div>
                )}
              </div>
            </div>

            {item?.child && <Tree data={item?.child} />}
          </li>
        );
      })}
    </ul>
  );