当前位置：首页 > React

react实现目录

2026-01-26 15:30:01React

React 实现目录的方法

使用 React 组件和状态管理

创建一个目录组件，通过状态管理来跟踪当前选中的目录项。可以使用 useState 钩子来管理状态。

import React, { useState } from 'react';

const Directory = ({ items }) => {
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li
            key={item.id}
            onClick={() => setSelectedItem(item.id)}
            style={{ fontWeight: selectedItem === item.id ? 'bold' : 'normal' }}
          >
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Directory;

动态生成目录结构

通过递归组件实现多层目录结构。适用于嵌套的目录数据。

import React from 'react';

const DirectoryItem = ({ item }) => {
  const [isExpanded, setIsExpanded] = React.useState(false);

  return (
    <div>
      <div onClick={() => setIsExpanded(!isExpanded)}>
        {item.children ? (isExpanded ? '[-] ' : '[+] ') : ''}
        {item.name}
      </div>
      {isExpanded && item.children && (
        <div style={{ marginLeft: '20px' }}>
          {item.children.map((child) => (
            <DirectoryItem key={child.id} item={child} />
          ))}
        </div>
      )}
    </div>
  );
};

export default DirectoryItem;

结合路由实现导航目录

使用 react-router-dom 实现目录导航功能，点击目录项跳转到对应路由。

import React from 'react';
import { Link } from 'react-router-dom';

const NavigationDirectory = ({ items }) => {
  return (
    <nav>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <Link to={item.path}>{item.name}</Link>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default NavigationDirectory;

使用第三方库实现复杂目录

对于更复杂的需求，可以使用第三方库如 react-treebeard 来实现可交互的树形目录。

import React from 'react';
import { Treebeard } from 'react-treebeard';

const TreeDirectory = ({ data }) => {
  const [cursor, setCursor] = React.useState(null);
  const [treeData, setTreeData] = React.useState(data);

  const onToggle = (node, toggled) => {
    if (cursor) {
      cursor.active = false;
    }
    node.active = true;
    if (node.children) {
      node.toggled = toggled;
    }
    setCursor(node);
    setTreeData({ ...treeData });
  };

  return <Treebeard data={treeData} onToggle={onToggle} />;
};

export default TreeDirectory;

样式优化和交互增强

为目录添加样式和交互效果，提升用户体验。可以使用 CSS 或 styled-components 来美化目录。

import styled from 'styled-components';

const StyledDirectory = styled.ul`
  list-style: none;
  padding: 0;
  li {
    padding: 8px;
    cursor: pointer;
    &:hover {
      background-color: #f0f0f0;
    }
  }
`;

const StyledDirectoryComponent = ({ items }) => {
  return (
    <StyledDirectory>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </StyledDirectory>
  );
};

export default StyledDirectoryComponent;

react实现目录