Question

我有一个看起来像这样的对象：

const myObject = {
    "Parent 1": {
        name: "Parent 1",
        results: [{name: "Child 1"}, {name: "Child 2" }, {name: "Child 3"}]
    },
    "Parent 2": {
         name: "Parent 2",
         results: [{name: "Child 1"}, {name: "Child 2"}, {name: "Child 3"}]
     }
}

我基于此结构渲染一棵树，其中包括遍历该树并移至下一个子节点的功能，而不管它们在哪个父节点中。为此，我在所有子节点上设置了一个索引，增加计数器。

但是我也想具有跳到下一个父级的功能，因此，如果选择了父级1，然后单击“下一个父级”，它将选择父级2。

对于我尝试过的每个解决方案，我都发现了问题，而且似乎缺少了一些东西： 1.如果我在所有节点上都设置了增量索引，则可以跳转到下一个子节点，但是我不知道要跳转到的下一个父节点。 2.如果我在父节点上设置了增量索引，则可以跳到下一个父节点，但不能跳到下一个子节点。 3.如果我跟踪两个索引，一个索引给父级，一个索引给所有子级，那么父/子索引将不同步，似乎比其价值还麻烦。

const renderChild = ({ ...result }, index, _array, offset = 0) => {
    const offsetIndex = index + offset

    return (
      <ChildItem
        key={result.name}
        index={offsetIndex}
        active={activeCidx === offsetIndex} // activeCidx is a state variable to increment / decrement the active index
      >
        {result.name}
      </ChildItem>
    )
  }

const renderParent = () => {
    let count = 0

    return _.map(myObject, ({ ...parent }, index) => {
      const parentProps = {
        key: parent.name,
        // This can walk through the tree, but the jump parent won't work
        // isOpen: _.inRange(activeCidx, count, count + parent.results.length),
        index: count,
        title: parent.name,
        ...parent,
      }

      const renderFn = _.partialRight(renderChild, count)

      count += parent.results.length

      return <ParentItem {...parentProps}>{parent.results.map(renderFn)}</ParentItem>
    })
  }

任何帮助将不胜感激

a树，跳到下一个孩子和下一个父母

0 个答案: