0

我正在使用react-window构建一个无限加载的用户列表。在列表中，每个项目都有一个来自 Material-UI的图标按钮，用于进一步操作。但是我无法在图标附近安装菜单，因为在设置anchorEl要打开的菜单时会重新渲染图标按钮。一个gif剪辑：

记录

该问题与React Material-UI 菜单锚点有关，被 react-window list 破坏，但具有更多 HOC。代码在此处列出。我希望我可以使用我的代码框进行演示，但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 的列表，这个问题是可以重现的。https://codesandbox.io/s/blissful-butterfly-qn3g7 所以问题在于使用innerElementType属性。

4

1 回答 1

2

事实证明，需要一个钩子。

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

为了解决我的问题，需要更仔细地处理处理事件的钩子。

于 2020-01-10T13:01:25.330 回答