gnir-work/react-window-dynamic-list

image flicker, not support ReactElement as children

ShellyWang94 opened this issue · 1 comments

ShellyWang94 commented

hi, I've found the problem that when i scroll the list with page, the image will reload even if the item has loaded;
1.scrolldown the dynamic list which has image
2.scrollup to the front of page
you can see the image flicker
when i use checkbox, this sisuation appeared;
with this example, you can see the problem:
https://8860u.csb.app/

the resolve method is using the React.memo with children;
for example:

const Row = memo(({ data, index, style }) => {
  // Data passed to List as "itemData" is available as props.data
  const { items, toggleItemActive } = data;
  const item = items[index];
  console.log("lalall");
  return (
    <div onClick={() => toggleItemActive(index)} style={style}>
      <img
        height="40"
        src="https://avatars.githubusercontent.com/u/19513176?s=80&v=4"
      />
      {item.label} is {item.isActive ? "active" : "inactive"}
    </div>
  );
}, areEqual);

<Dynamiclist ...anyProps>{Row}</Dynamiclist>

but children has to be a function, if not,

const measureIndex = index => {
    const ItemContainer = (
      <div id="item-container" style={{ overflow: "auto" }}>
        {children({ index, data: itemData })}
      </div>
    );

    const MeasurementContainer = measurementContainerElement({
      style: { width, height, overflowY: "scroll" },
      children: ItemContainer
    });

    const { height: measuredHeight } = measureElement(
      MeasurementContainer,
      debug
    );
    return measuredHeight;
  };

measureIndex method will throw a error;
so, is there any possible to solve this problem? support the children as simple ReactElement
Thanks for your reading.

gnir-work commented