Реактивное окно Как пройти в компонентах? - PullRequest
Новая
       21

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

2 голосов
/ 21 мая 2019

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

Если у меня есть что-то подобное 

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

1 Ответ

1 голос
/ 21 мая 2019

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