Question

我想通过其属性值在树中找到一个元素，然后移回树的开头，并使用JS将每个元素父级的isExpanded属性设置为true。

所以我有这个对象：

elementsArray = [
  {
    name: 'test_1',
    isExpanded: false,
    expandElements: [
      {
        name: 'test_1_1',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_1_1_1'
          },
          {
            name: 'test_1_1_2'
          }
        ]
      },
      {
        name: 'test_1_2',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_1_2_1'
          },
          {
            name: 'test_1_2_2'
          }
        ]
      }
    ]
  },
  {
    name: 'test_2',
    isExpanded: false,
    expandElements: [
      {
        name: 'test_2_1',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_2_1_1'
          },
          {
            name: 'test_2_1_2'
          }
        ]
      },
      {
        name: 'test_2_2',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_2_2_1'
          },
          {
            name: 'test_2_2_2'
          }
        ]
      }
    ]
  }
]

我想找到具有属性name: 'test_2_2_1'的元素，并将其每个父元素的isExpanded属性设置为true。

应如何工作：

调用方法expandParentElements(elementsArray, 'test_2_2_1')
elementsArray更改为：

elementsArray = [
  {
    name: 'test_1',
    isExpanded: false,
    expandElements: [
      {
        name: 'test_1_1',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_1_1_1'
          },
          {
            name: 'test_1_1_2'
          }
        ]
      },
      {
        name: 'test_1_2',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_1_2_1'
          },
          {
            name: 'test_1_2_2'
          }
        ]
      }
    ]
  },
  {
    name: 'test_2',
    isExpanded: **true**,
    expandElements: [
      {
        name: 'test_2_1',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_2_1_1'
          },
          {
            name: 'test_2_1_2'
          }
        ]
      },
      {
        name: 'test_2_2',
        isExpanded: **true**,
        expandElements: [
          {
            name: 'test_2_2_1'
          },
          {
            name: 'test_2_2_2'
          }
        ]
      }
    ]
  }
]

到现在，我已经设法仅在树内递归移动并找到适当的元素。如下所示：

let expandParentElements = (array, searchName) => {
  return array.map(item => {
    if (item.name === searchName) {
      return item
    } else if (item.expandElements) {
      return expandParentElements(item.expandElements, searchName)
    }
  })
}

Answer 1

这是一个在项目路径上设置isExpanded的功能。项目本身（例如，当有子项目时）将不设置为isExpanded。

此函数还不会在调用函数之前清除可能已经设置为isExpanded的{{1}}值。

true

您可能还希望使用一个函数来折叠全部，即将所有const expandParentElements = (array, searchName) => array && array.some(item => item.name === searchName || expandParentElements(item.expandElements, searchName) && (item.isExpanded = true) ); // Sample data from question const elementsArray = [{name: 'test_1',isExpanded: false,expandElements: [{name: 'test_1_1',isExpanded: false,expandElements: [{name: 'test_1_1_1'},{name: 'test_1_1_2'}]},{name: 'test_1_2',isExpanded: false,expandElements: [{name: 'test_1_2_1'},{name: 'test_1_2_2'}]}]},{name: 'test_2',isExpanded: false,expandElements: [{name: 'test_2_1',isExpanded: false,expandElements: [{name: 'test_2_1_1'},{name: 'test_2_1_2'}]},{name: 'test_2_2',isExpanded: false,expandElements: [{name: 'test_2_2_1'},{name: 'test_2_2_2'}]}]}]; expandParentElements(elementsArray, "test_2_2_1"); console.log(elementsArray);设置为isExpanded：

false

Answer 2

elementsArray.forEach(element => {

  let updateParent =  element.expandElements.reduce(((prevFound, expandElement) => {

      let found = expandElement.expandElements.some(obj => obj.name === "test_1_1_1")
      expandElement.isExpanded = found
      return prevFound || found

  }), false)

  element.isExpanded = updateParent

})

在树中查找元素并更改其父母的属性值

2 个答案: