Реактивное окно Как пройти в компонентах?

Question

Я пытаюсь реализовать ответное окно, но я не уверен, как передать компонент, который принимает его собственные свойства

Если у меня есть что-то вроде этого

{
  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>
);

Answer 1

Пример действительно сбивает с толку. Этот пример показывает, как вы можете использовать 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" }]}
/>