React从嵌套数组中获取元素

function findElement(arr, id) {
  let result = null;
  
  arr.forEach((item) => {
    if (item.id === id) {
      result = item;
    } else if (Array.isArray(item.children)) {
      const nestedResult = findElement(item.children, id);
      if (nestedResult) {
        result = nestedResult;
      }
    }
  });
  
  return result;
}

const data = [
  {
    id: 1,
    name: 'Parent 1',
    children: [
      { id: 2, name: 'Child 1' },
      { id: 3, name: 'Child 2' },
    ],
  },
  {
    id: 4,
    name: 'Parent 2',
    children: [
      {
        id: 5,
        name: 'Child 3',
        children: [{ id: 6, name: 'Grandchild 1' }],
      },
    ],
  },
];

const element = findElement(data, 6);
console.log(element);  // 输出: { id: 6, name: 'Grandchild 1' }

import React from 'react';

function useFindElement(arr, id) {
  const findElement = (arr, id) => {
    // ...实现和前面相同的查找逻辑...
  };

  const element = React.useMemo(() => findElement(arr, id), [arr, id]);

  return element;
}

function MyComponent() {
  const data = [
    // ...嵌套数组数据...
  ];

  const element = useFindElement(data, 6);
  
  // ...使用 element 渲染组件...
}