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

reactjs react-window

21.05.2019 20:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

2 866

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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" }]}
/>

хорошо, я попробую это. Это кажется более разумным. Что касается другого вопроса, я хочу, чтобы между каждым элементом в этом списке был пробел. Я пытался сделать margin: 20px, но, похоже, между записями нет пробелов.

— 21.05.2019 20:49

Спасибо за это! из документов не сразу ясно, как а) передать массив ваших собственных данных и б) как ссылаться на эти данные в визуализируемом компоненте (на который ссылаются через опору «данные»!).

— 12.12.2020 16:20

21.05.2019 20:18

Другие вопросы по теме

React Error Boundary никогда не работает

Неправильное позиционирование всплывающего окна React/MUI с помощью anchorPosition

Как я могу динамически вычислять высоту строки по индексу строки для VariableSizeList?

Отображение панели навигации поверх окна реакции

Как переопределить автоматическое переполнение, чтобы всплывающая подсказка отображалась вне сетки

React-Window бесконечно вызывает функцию RenderRow

Как предотвратить повторную визуализацию дочерних элементов внутри компонента List окна реакции

(react-window) Как передать реквизиты {Row} в <FixedSizeList> {Row}</FixedSizeList>

Предотвратить повторный рендеринг элемента DOM в компоненте виртуализированного дерева с помощью окна реакции

React Window Как передать компоненты?

Ответы 1

Другие вопросы по теме

Похожие вопросы