javascript - 多级表行展开折叠反应

Question

我有对象的多级数组，所以如果键值是对象，则添加展开/折叠按钮，然后单击它，渲染行等等......

var cars = {
  label: 'Autos',
  subs: [
    {
      label: 'SUVs',
      subs: []
    },
    {
      label: 'Trucks',
      subs: [
        {
          label: '2 Wheel Drive',
          subs: []
        },
        {
          label: '4 Wheel Drive',
          subs: [
            {
              label: 'Ford',
              subs: []
            },
            {
              label: 'Chevrolet',
              subs: []
            }
          ]
        }
      ]
    },
    {
      label: 'Sedan',
      subs: []
    }
  ]
}

标签： javascriptreactjs

Answer 1

我使用 reactjs 为您创建了一个演示，并围绕您的给定对象进行递归。

代码沙盒演示

看看它，如果它对您的用例有帮助。你可以参考下面的代码来推断更多

import React from "react";

const cars = {
  label: "Autos",
  subs: [
    {
      label: "SUVs",
      subs: []
    },
    {
      label: "Trucks",
      subs: [
        {
          label: "2 Wheel Drive",
          subs: []
        },
        {
          label: "4 Wheel Drive",
          subs: [
            {
              label: "Ford",
              subs: []
            },
            {
              label: "Chevrolet",
              subs: []
            }
          ]
        }
      ]
    },
    {
      label: "Sedan",
      subs: []
    }
  ]
};

const generateRow = (rowData, open, setOpen) => {
  const handleExpand = () => {
    let set = new Set(open);
    set.add(rowData.label);
    setOpen(set);
  };

  const handleCollapse = () => {
    let set = new Set(open);
    set.delete(rowData.label);
    setOpen(set);
  };

  return (
    <div>
      <p>
        {rowData.label}
        &nbsp;
        {rowData.subs.length > 0 && !open.has(rowData.label) && (
          <button onClick={handleExpand}>&#x2193;</button>
        )}
        {rowData.subs.length > 0 && open.has(rowData.label) && (
          <button onClick={handleCollapse}>&#x2191;</button>
        )}
      </p>
      {rowData.subs.length > 0 && open.has(rowData.label) && (
        <ul>
          {rowData.subs.map((child) => {
            return (
              <li key={child.label}>{generateRow(child, open, setOpen)}</li>
            );
          })}
        </ul>
      )}
      <ol></ol>
    </div>
  );
};

const App = () => {
  // open state to keep trach of which labels are selected to be open or not
  // use recursion to generate list on demand

  const [open, setOpen] = React.useState(new Set());

  return generateRow(cars, open, setOpen);
};

export default App;