javascript - 无法在 ReactJS 中完美地使用 CSS 中的位置

Question

我正在尝试制作一个递归反应树组件，用于显示在 MacOS 上作为 finder 存在的文件结构，类似这样。

这是我到目前为止所做的

我按照这篇文章构建了我的组件 -链接

这是显示文件名称和反应图标的代码

const getPaddingLeft = (level, type) => {
  let paddingLeft = level*100;
  return paddingLeft;
}

const getPaddingTop = (level, type) => {
  let paddingLeft = -level*27.5;
  return paddingLeft;
}

const StyledTreeNode = styled.div`
  display: flex;
position: relative;
  width: 100px;
  flex-direction: row;
  align-items: left;
  padding: 5px 8px;
  padding-left: ${props => getPaddingLeft(props.level, props.type)}px;
  top: ${props => getPaddingTop(props.level, props.type)}px;
  
`;

const NodeIcon = styled.div`
  font-size: 12px;
  margin-right: ${props => props.marginRight ? props.marginRight : 5}px;
`;

const getNodeLabel = (node) => last(node.path.split('/'));

const TreeNode = (props) => {
  const { node, getChildNodes, level, onToggle, onNodeSelect } = props;

  return (
    <React.Fragment>
      <StyledTreeNode level={level} type={node.type}>
        <NodeIcon onClick={() => onToggle(node)}>
          { node.type === 'folder' && (node.isOpen ? <FaChevronDown /> : <FaChevronRight />) }
        </NodeIcon>
        
        <NodeIcon marginRight={10}>
          { node.type === 'file' && <FaFile /> }
          { node.type === 'folder' && node.isOpen === true && <FaFolderOpen /> }
          { node.type === 'folder' && !node.isOpen && <FaFolder /> }
        </NodeIcon>
        

        <span role="button" onClick={() => onNodeSelect(node)}>
          { getNodeLabel(node) }
        </span>
      </StyledTreeNode>

      { node.isOpen && getChildNodes(node).map(childNode => (
        <TreeNode 
          {...props}
          node={childNode}          
          level={level + 1}
        />
      ))}
    </React.Fragment>
  );
}

TreeNode.defaultProps = {
  level: 0,
};

在此，StyledTreeNode如果我在 CSS 中放置，我将position: relative无法单击箭头并让子文件在它们按照应有的方式打开后折叠回来。

但是，如果我删除position，它变成

您可以看到子节点已下降到位，但现在我可以再次单击箭头，子文件会折叠回来。

我该如何解决这个问题，以便孩子的文件在单击箭头时折叠，并且孩子不会下降到与其父节点相对应的位置？

标签： javascriptcssreactjs