React MUI TreeView键导航在使用Branch组件时损坏

Question

当我执行以下操作时，我可以使用箭头键在树中导航，当我在文档中制表时，树会得到焦点(只有根项目，分支会被打断，因为它们使用了Branch(：

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>

我认为这与没有转发我尝试使用类组件(React.PureComponent(但没有更改的ref有关。我认为TreeItem或TreeView的直接子级需要有nodeId道具，但对于一组节点来说，这是什么？

一个例子显示了这一点，但我无法将nodeId传递给Branch，因为它接收到多个nodeId。另一个示例显示使用renderTree函数，但我的项目有一个复选框，选中一个项目会导致整个树重新绘制。

如果我需要转发一个裁判，那是什么，没有给出这样的例子？

更新

我走得更远，注意到它(没有(通过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但没有呈现根，错误为：

未捕获类型错误：无法读取未定义的属性"children"在buildVisible(TreeView.js:590(

上述错误发生在<ForwardRef(TreeView(>组件：

传递nodeId和渲染根目录会起作用，但根目录是一个伪目录，使递归更容易，所以我不想渲染它。

Answer 1

如果我让Item在当前父级为root时渲染TreeView(忽略root(，那么它运行良好，下面是代码：

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>
);
});