如何在JavaScript/React中使用split()方法将无ID的扁平复杂对象数组转换为嵌套JSON数据以实现树形侧边栏？

Hey there! Let's break this down step by step—first we'll tackle transforming your flat array into the nested structure you need, then we'll build the React tree sidebar component. I'll keep it beginner-friendly since you're new to React 😊

First, let's assume your flat array looks something like this (adjust the property names to match your actual data):

const flatAssets = [
  { category: "Electronics>Laptops>2301", asset: "MacBook Pro" },
  { category: "Electronics>Laptops>2302", asset: "Dell XPS" },
  { category: "Electronics>Phones>2303", asset: "iPhone 15" },
  { category: "Home>Appliances>2304", asset: "Refrigerator" }
];

Here, the "second element" you mentioned is the category field, split by > into hierarchical segments. We'll write a function to turn this into nested nodes where each segment is a parent of the next, and the final segment gets the asset as its child.

Here's the function to build the nested tree:

function buildNestedTree(flatArray, pathKey = 'category', assetKey = 'asset', separator = '>') {
  const root = []; // This will hold our top-level nodes

  flatArray.forEach(item => {
    // Split the path into individual segments
    const pathSegments = item[pathKey].split(separator);
    let currentLevel = root; // Start at the top level

    pathSegments.forEach((segment, index) => {
      // Check if this segment already exists in the current level
      let existingNode = currentLevel.find(node => node.name === segment);

      // If it doesn't exist, create a new node
      if (!existingNode) {
        existingNode = {
          name: segment,
          children: []
        };
        currentLevel.push(existingNode);
      }

      // If we're at the last segment, add the asset as a child node
      if (index === pathSegments.length - 1) {
        existingNode.children.push({
          name: item[assetKey],
          isAsset: true // Optional flag to tell assets apart from parent nodes
        });
      }

      // Move down to the next level of children for the next iteration
      currentLevel = existingNode.children;
    });
  });

  return root;
}

// Use it like this:
const nestedTree = buildNestedTree(flatAssets);

When you run this, nestedTree will be a nested JSON structure ready for your React component.

Now that we have our nested data, we'll create a recursive React component to render the tree (recursive because each node can have its own children, so the component will render itself for child nodes).

Full Component Code #

import { useState } from 'react';

// Recursive component to render individual tree nodes
const TreeNode = ({ node }) => {
  // Track if the node is expanded/collapsed
  const [isExpanded, setIsExpanded] = useState(false);

  const hasChildren = node.children && node.children.length > 0;
  const isAsset = node.isAsset; // Use our flag to identify assets

  return (
    <div className="tree-node">
      {/* Toggle button for parent nodes (not assets) */}
      {hasChildren && !isAsset && (
        <button 
          onClick={() => setIsExpanded(!isExpanded)}
          className="toggle-btn"
        >
          {isExpanded ? '▼' : '▶'}
        </button>
      )}
      {/* Label for the node */}
      <span className={isAsset ? 'asset-label' : 'node-label'}>
        {node.name}
      </span>
      {/* Render children only if the node is expanded */}
      {hasChildren && isExpanded && (
        <div className="children">
          {node.children.map((child, index) => (
            <TreeNode key={index} node={child} />
          ))}
        </div>
      )}
    </div>
  );
};

// Main sidebar component that holds the tree
const TreeSidebar = ({ treeData }) => {
  return (
    <div className="tree-sidebar">
      {treeData.map((rootNode, index) => (
        <TreeNode key={index} node={rootNode} />
      ))}
    </div>
  );
};

// Example usage in your app
function App() {
  // Your flat array data
  const flatAssets = [
    { category: "Electronics>Laptops>2301", asset: "MacBook Pro" },
    { category: "Electronics>Laptops>2302", asset: "Dell XPS" },
    { category: "Electronics>Phones>2303", asset: "iPhone 15" },
    { category: "Home>Appliances>2304", asset: "Refrigerator" }
  ];
  // Convert to nested tree
  const nestedTree = buildNestedTree(flatAssets);

  return (
    <div className="app">
      <TreeSidebar treeData={nestedTree} />
    </div>
  );
}

export default App;

Add Some CSS for Styling #

To make the tree look like a proper sidebar, add this CSS (you can put it in a .css file or use inline styles):

.tree-sidebar {
  width: 250px;
  padding: 1rem;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
  height: 100vh;
  overflow-y: auto;
}

.tree-node {
  margin: 0.4rem 0;
}

.toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.3rem;
  font-size: 0.9rem;
}

.node-label {
  cursor: pointer;
  font-weight: 500;
}

.asset-label {
  cursor: pointer;
  color: #555;
  padding-left: 1rem;
  font-size: 0.95rem;
}

.children {
  margin-left: 1.2rem;
}

• Recursive Components: This is perfect for tree structures because it handles any depth of nesting without writing extra code for each level.
• State for Expansion: We use useState to track if each parent node is open or closed. For larger trees, you could use Context API to manage expansion state globally, but local state works great for small/medium trees.
• Keys: We're using index as the key here since your original objects don't have IDs. If you ever add unique IDs to your nodes, switch to those for better performance.
• Customization: Adjust the buildNestedTree function's parameters to match your actual data—if your path uses a different separator (like /) or different property names, just update pathKey, assetKey, or separator.

• If your path isn't splitting correctly, double-check the separator you're passing to buildNestedTree.
• If your assets have more details (like IDs or descriptions), modify the part where we push the asset to include those properties (e.g., { name: item.asset, id: item.assetId, ... }).
• To add click handlers for assets or nodes, pass an onClick prop to the <span> elements and handle it in the parent component.

内容的提问来源于stack exchange，提问作者Tamojay Dey