Привязка меню React Material-UI нарушена списком реагирующих окон - PullRequest
Новая
       37

Привязка меню React Material-UI нарушена списком реагирующих окон

2 голосов
/ 16 марта 2019

Я использую Material-UI и реагирующее окно в проекте. Моя проблема в том, что компонент menu material-ui не привязывается к элементу, предоставленному, когда этот элемент находится в виртуализированном списке реагирующего окна. Меню появится в левом верхнем углу экрана вместо привязки к кнопке, которая его открывает. При использовании всего этого в не виртуализированном списке все работает как положено. Меню правильно привязано к кнопке, которая его открывает.

Вот пример песочницы . Песочница довольно специфична для того, как я использую компоненты, о которых идет речь.

Любое руководство о том, как я могу решить эту проблему?

1 Ответ

1 голос
/ 17 марта 2019

Вот модифицированная версия вашей песочницы, которая исправляет это:

Edit BigList menu

Вот ваш первоначальный код в BigList: 

const BigList = props => {
  const { height, ...others } = props;
  const importantData = Array(101 - 1)
    .fill()
    .map((_, idx) => 0 + idx);
  const rows = ({ index, style }) => (
    <FancyListItem
      index={index}
      styles={style}
      text="window'd (virtual): "
      {...others}
    />
  );

  return (
    <FixedSizeList
      height={height}
      itemCount={importantData.length}
      itemSize={46}
      outerElementType={List}
    >
      {rows}
    </FixedSizeList>
  );
};

Я изменил это на следующее: 

const Row = ({ data, index, style }) => {
  return (
    <FancyListItem
      index={index}
      styles={style}
      text="window'd (virtual): "
      {...data}
    />
  );
};

const BigList = props => {
  const { height, ...others } = props;
  const importantData = Array(101 - 1)
    .fill()
    .map((_, idx) => 0 + idx);
  return (
    <FixedSizeList
      height={height}
      itemCount={importantData.length}
      itemSize={46}
      outerElementType={List}
      itemData={others}
    >
      {Row}
    </FixedSizeList>
  );
};

Важным отличием является то, что Row теперь является согласованным типом компонента, а не переопределяется при каждом рендеринге BigList.С вашим исходным кодом каждый рендер BigList заставлял перемонтировать все элементы FancyListItem, а не просто перерисовывать, потому что функция вокруг него, представляющая тип "row", была новой функцией с каждым рендерингом BigList.Одним из следствий этого является то, что элемент привязки, который вы передавали Menu, больше не был подключен к тому времени, когда Menu пытался определить его положение, а anchorEl.getBoundingClientRect () предоставлял позицию x, y 0,0.

Вы заметите, что в документации по реагирующему окну (https://react -window.now.sh / # / examples / list / fixed-size ) компонент Row определен снаружикомпонента Example аналогично тому, как теперь структурирована фиксированная версия вашего кода.

...