使用分支组件时 React MUI TreeView 键导航损坏答案

【问题标题】：React MUI TreeView key navigation broken when using a Branch component使用分支组件时 React MUI TreeView 键导航损坏
【发布时间】：2021-09-12 23:12:00
【问题描述】：

当我执行以下操作时，我可以使用箭头键在树中导航，并且当我在文档中切换时树获得焦点（只有根项目，子分支被破坏，因为它们使用分支）：

const Item = React.memo(function Item({ item }) {
  const { onChange } = useContext(DataContext);
  return (
    <TreeItem
      key={item.key}
      nodeId={item.key}
      label={item.name}
    >
      {Boolean(item?.children) && (
        <Branch data={item.children} />
      )}
    </TreeItem>
  );
});



<TreeView multiSelect selected={NONE}>
  {data
    .map((item) => (
      <Item
        key={item.key}
        item={item}
        nodeId={item.key}
      />
    ))}
</TreeView>

但是当我执行以下操作时，在文档中切换时树不会集中，并且上下箭头不会在树中导航（仅在单击树中的项目后向左和向右）：

<TreeView multiSelect selected={NONE}>
  <Branch data={data} />
</TreeView>

我认为它与not forwarding a ref 有关我尝试使用类组件（React.PureComponent）但没有改变。我认为TreeItem 或TreeView 的直系子节点需要有一个 nodeId 道具，但对于一组节点来说，这将是什么？

一个example 显示此工作，但我无法将 nodeId 传递给分支，因为它接收到多个。 Another example 显示使用 renderTree 函数，但我的项目有一个复选框，选中一个项目会导致整个树重新绘制。

如果我需要转发一个 ref 那么它是什么，没有给出这方面的例子？

更新

我走得更远，注意到它（不是）通过nodeId 会破坏它：

const Item = React.memo(function Item({ parent }) {
  const { map } = useContext(DataContext);
  const parentItem = map.get(parent);
  const children = !parentItem?.children
    ? null
    : parentItem.children.map((key) => (
        <Item key={key} parent={key} nodeId={key} />
      ));
  //this will not render root but crashes when Tree passes
  //  a nodeId
  if (!parentItem.parent) {
    return children;
  }
  return (
    <TreeItem
      key={parentItem.key}
      nodeId={parentItem.key}
      label={parentItem.name || "root"}
    >
      {children}
    </TreeItem>
  );
});
const Tree = React.memo(function Tree({ parent }) {
  return (
    <TreeView
      multiSelect
      selected={NONE}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      {/* if item does not render parent and I pass nodeId
        it will crash if no nodeId is passed then key
        navigation is broken again */}
      <Item parent={parent} nodeId={parent} />
    </TreeView>
  );
});

如果我通过 nodeId 但不渲染 root 错误是：

未捕获的类型错误：无法读取未定义的属性“孩子” 在 buildVisible (TreeView.js:590)

上述错误发生在组件中：

传递 nodeId 并渲染 root 将起作用，但 root 是一个虚拟对象，使递归更容易，所以我不想渲染它。

【问题讨论】：

标签： reactjs treeview react-material

【解决方案1】：

如果我让 Item 在当前父级为 root（root 被忽略）时呈现 TreeView，那么它工作得很好，这里是代码：

const Item = React.memo(function Item({ parent }) {
  const { map } = useContext(DataContext);
  const parentItem = map.get(parent);
  const children = !parentItem?.children
    ? null
    : parentItem.children.map((key) => (
        <Item key={key} parent={key} nodeId={key} />
      ));
  if (!parentItem.parent) {
    return (
      <TreeView
        multiSelect
        selected={NONE}
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}
      >
        {children}
      </TreeView>
    );
  }
  return (
    <TreeItem
      key={parentItem.key}
      nodeId={parentItem.key}
      label={parentItem.name || "root"}
    >
      {children}
    </TreeItem>
  );
});
const Container = React.memo(function Container({
  data,
  values,
}) {
  //code creating a map in context to update on click
  //  and call parent onChange, when there is a change
  //  reRender is set again (parent is a string to parent key)
  return (
    <DataContext.Provider value={contextValue}>
      <Item reRender={reRender} parent={root(map).key} />
    </DataContext.Provider>
  );
});

【讨论】：