add addtional props with render children for IE

Author: zombieJ

README.md

@@ -47,12 +47,15 @@ import List from 'rc-virtual-list';
 
 ## List
 
-| Prop       | Description                                             | Type                 | Default |
-| ---------- | ------------------------------------------------------- | -------------------- | ------- |
-| children   | Render props of item                                    | item => ReactElement | -       |
-| component  | Customize List dom element                              | string \| Component  | div     |
-| data       | Data list                                               | Array                | -       |
-| disabled   | Disable scroll check. Usually used on animation control | boolean              | false   |
-| height     | List height                                             | number               | -       |
-| itemHeight | Item minium height                                      | number               | -       |
-| itemKey    | Match key with item                                     | string               | -       |
+| Prop       | Description                                             | Type                                 | Default |
+| ---------- | ------------------------------------------------------- | ------------------------------------ | ------- |
+| children   | Render props of item                                    | (item, index, props) => ReactElement | -       |
+| component  | Customize List dom element                              | string \| Component                  | div     |
+| data       | Data list                                               | Array                                | -       |
+| disabled   | Disable scroll check. Usually used on animation control | boolean                              | false   |
+| height     | List height                                             | number                               | -       |
+| itemHeight | Item minium height                                      | number                               | -       |
+| itemKey    | Match key with item                                     | string                               | -       |
+
+`children` provides additional `props` argument to support IE 11 scroll shaking.
+It will set `style` to `visibility: hidden` when measuring. You can ignore this if no requirement on IE.

examples/basic.tsx

@@ -74,7 +74,13 @@ const Demo = () => {
             boxSizing: 'border-box',
           }}
         >
-          {item => (type === 'dom' ? <ForwardMyItem {...item} /> : <TestItem {...item} />)}
+          {(item, _, props) =>
+            type === 'dom' ? (
+              <ForwardMyItem {...item} {...props} />
+            ) : (
+              <TestItem {...item} {...props} />
+            )
+          }
         </List>
       </div>
     </React.StrictMode>

src/List.tsx

@@ -13,7 +13,11 @@ import {
 } from './utils/itemUtil';
 import { getIndexByStartLoc, findListDiffIndex } from './utils/algorithmUtil';
 
-type RenderFunc<T> = (item: T, index: number) => React.ReactNode;
+type RenderFunc<T> = (
+  item: T,
+  index: number,
+  props: { style: React.CSSProperties },
+) => React.ReactNode;
 
 const ITEM_SCALE_RATE = 1;
 
@@ -401,11 +405,14 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
   /**
    * Phase 4: Render item and get all the visible items height
    */
-  public renderChildren = (list: T[], startIndex: number, renderFunc: RenderFunc<T>) =>
+  public renderChildren = (list: T[], startIndex: number, renderFunc: RenderFunc<T>) => {
+    const { status } = this.state;
     // We should measure rendered item height
-    list.map((item, index) => {
+    return list.map((item, index) => {
       const eleIndex = startIndex + index;
-      const node = renderFunc(item, eleIndex) as React.ReactElement;
+      const node = renderFunc(item, eleIndex, {
+        style: status === 'MEASURE_START' ? { visibility: 'hidden' } : {},
+      }) as React.ReactElement;
       const eleKey = this.getIndexKey(eleIndex);
 
       // Pass `key` and `ref` for internal measure
@@ -416,6 +423,7 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
         },
       });
     });
+  };
 
   public render() {
     const {