Кажется, проблема не в этом компоненте. Не могли бы вы вставить код компонента, где вы используете MenuItemList? Кажется, проблема с ref response , используемым Material-ui
. Я также рекомендую использовать filter [doc] для фильтрации защищенных предметов.
import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import ListItemText from '@material-ui/core/ListItemText';
const ITEMS = {
item1: { id: 1, name: '1', description: 'item1', protected: true },
item2: { id: 2, name: '2', description: 'item2' },
item3: { id: 3, name: '3', description: 'item3' },
}
const MenuItemList: any = () => {
return Object.values(ITEMS).filter(item => !item.protected).map(
(item) =>
<MenuItem key={item.id} value={item.id}>
<ListItemText
primary={item.name}
secondary={item.description}
/>
</MenuItem>
);
};
export default MenuItemList;
Редактировать
Меню использует первый дочерний элемент меню в качестве «привязки контента» для компонента Popover, который используется внутри меню в меню. «Содержание якорь» является DOM-элемент в меню, что попытки поповера выстраиваться с якорем элементом (элемент вне меню, которое является точкой отсчета для позиционирования меню).
Для того, чтобы рычаги Первый дочерний элемент как якорь контента, Menu добавляет ссылку на него (используя cloneElement). Чтобы не получить полученную ошибку (и чтобы позиционирование работало правильно), вашему функциональному компоненту необходимо переслать ссылку на один из компонентов, которые он отображает (обычно это самый внешний компонент - div в вашем случае).
Когда вы используете div в качестве прямого потомка Menu, вы не получаете сообщение об ошибке, потому что div может успешно получить ссылку.
Поэтому вам следует изменить код MenuItemList на:
import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import ListItemText from '@material-ui/core/ListItemText';
const ITEMS = {
item1: { id: 1, name: '1', description: 'item1', protected: true },
item2: { id: 2, name: '2', description: 'item2' },
item3: { id: 3, name: '3', description: 'item3' },
}
const MenuItemList: any = () => {
return (
<div>
{Object.values(ITEMS)
.filter(item => !item.protected)
.map(item => (
<MenuItem key={item.id} value={item.id}>
<ListItemText primary={item.name} secondary={item.description} />
</MenuItem>
))}
</div>
);
};
export default MenuItemList;