React Material-由于react-window重新渲染导致UI菜单锚点丢失

Question

我正在用react-window构建一个无限加载的用户列表。在该列表中，每个项目都有一个来自Material-UI的icon button，用于进一步操作。但我不能将菜单挂载到图标附近，因为当为要打开的菜单设置anchorEl时，图标按钮将被重新呈现。一个gif剪辑：

​

​

这个问题与React Material-UI menu anchor broken by react-window list有关，但有更多的问题。代码在here中列出。我希望我能用我的codesandbox来演示，但是react-measure一直在长高。

function App() {
  const [anchorEl, setAnchorEl] = useState(null);

  const openMenu = React.useCallback(e => {
    e.stopPropagation();
    setAnchorEl(e.currentTarget);
    console.log("target", e.currentTarget);
  }, []);

  const handleClose = () => {
    setAnchorEl(null);
  };

  const [items, setItems] = React.useState([]);
  const isItemLoaded = index => {
    const c = index < items.length;
    // console.log("isItemLoaded", index, c);
    return c;
  };
  const loadMoreItems = (startIndex, stopIndex) => {
    console.log("loadMoreItems", startIndex, items);
    setItems(items.concat(Array(10).fill({ name: "1", size: startIndex })));
  };

  const innerET = React.forwardRef((props, ref) => (
    <div ref={ref} {...props} />
  ));

  const Row = React.useCallback(
    ({ index, style }) => {
      console.log("Row", items, index);
      return items[index] ? (
        <ListItem style={style} key={index}>
          <Button variant="contained" color="primary" onClick={openMenu}>
            Row {index}: {items[index].size}
          </Button>
        </ListItem>
      ) : null;
    },
    [items, openMenu]
  );

  const innerListType = React.forwardRef((props, ref) => (
    <List ref={ref} {...props} />
  ));

  return (
    <div className="App">
      <div className="ceiling">Something at top</div>

      <div className="interest">
        <Menu anchorEl={anchorEl} onClose={handleClose} />
        <Measure bounds offset>
          {({ measureRef, contentRect }) => {
            const height = Math.min(
              contentRect && contentRect.offset
                ? document.getElementById("root").getBoundingClientRect()
                    .height - contentRect.offset.top
                : itemSize * items.length,
              itemSize * items.length
            );
            console.log(
              "bounds",
              height,
              contentRect.bounds,
              contentRect.offset
            );
            return (
              <div>
                <div />
                <div ref={measureRef} className="measurement">
                  <InfiniteLoader
                    isItemLoaded={isItemLoaded}
                    itemCount={itemCount}
                    loadMoreItems={loadMoreItems}
                  >
                    {({ onItemsRendered, ref }) => (
                      <FixedSizeList
                        height={height}
                        width={
                          contentRect.bounds !== undefined &&
                          contentRect.bounds.width !== undefined
                            ? contentRect.bounds.width
                            : -1
                        }
                        itemCount={itemCount}
                        itemSize={itemSize}
                        onItemsRendered={onItemsRendered}
                        ref={ref}
                        innerElementType={innerET}
                      >
                        {Row}
                      </FixedSizeList>
                    )}
                  </InfiniteLoader>
                </div>
              </div>
            );
          }}
        </Measure>
      </div>
    </div>
  );
}

据我所知，涟漪效果会在第一次点击时触发框中的重新渲染。此外，在点击时重新渲染之后的第二次点击将不会触发重新渲染。这对我来说更奇怪了。

编辑:我修复了第一个沙箱。通过使用Material UI的列表，这个问题是可以重现的。所以问题出在使用innerElementType属性上。

Answer 1

事实证明需要一个钩子。

  const innerListType = React.useMemo(() => {
    return React.forwardRef((props, ref) => (
      <List component="div" ref={ref} {...props} />
    ));
  }, []);

要解决我的问题，需要更加小心地处理用于处理事件的钩子。