3

我正在尝试实现react-window 但我不确定如何传入一个包含它自己的属性的组件

如果我有这样的事情

{
  items.map(
    (item, index) => {
      <MyComponent
        key={key}
        item={item}
      />;
    }
  );
}

如何制作变量列表？

该示例未显示如何执行此操作

import { VariableSizeList as List } from 'react-window';

// These row heights are arbitrary.
// Yours should be based on the content of the row.
const rowHeights = new Array(1000)
  .fill(true)
  .map(() => 25 + Math.round(Math.random() * 50));

const getItemSize = index => rowHeights[index];

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const Example = () => (
  <List
    height={150}
    itemCount={1000}
    itemSize={getItemSize}
    width={300}
  >
    {Row}
  </List>
);
4

1 回答 1

5

这个例子确实令人困惑。此示例显示了如何使用react-window数据数组而不是主页显示的生成示例：

class ComponentThatRendersAListOfItems extends PureComponent {
  render() {
    // Pass items array to the item renderer component as itemData:
    return (
      <FixedSizeList
        itemData={this.props.itemsArray}
        {...otherListProps}
      >
        {ItemRenderer}
      </FixedSizeList>
    );
  }
}

// The item renderer is declared outside of the list-rendering component.
// So it has no way to directly access the items array.
class ItemRenderer extends PureComponent {
  render() {
    // Access the items array using the "data" prop:
    const item = this.props.data[this.props.index];

    return (
      <div style={this.props.style}>
        {item.name}
      </div>
    );
  }
}

虽然itemsArray代码示例中没有提供，但表面上您会在其中包含您需要传递给的道具ItemRenderer，例如name此处所示。这将使您的使用看起来像这样：

<ComponentThatRendersAListOfItems
  itemsArray={[{ name: "Test 1" }, { name: "Test 2" }]}
/>
于 2019-05-21T18:18:10.447 回答