как передать реквизит в Rider-Reader-Virtualized

Question

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

state = {
    listHeight: 1000,
    listRowHeight: 800,
    listRowWidth: 1000,
    rowCount: 10
}


rowRenderer ({ index, key, style, posts }) {
    if (!posts) {
        return <div></div>
    } else {
    return (
        <PostItem key={key} style={style} post={posts[index]}/>
    );
    }
}


render() {
    return (
        <div className="ui container">
            <div id="postListContainer" className="ui relaxed list">
                <List 
                    width={this.state.listRowWidth}
                    height={this.state.listHeight}
                    rowHeight={this.state.listRowHeight}
                    rowRenderer={this.rowRenderer}
                    rowCount={this.state.rowCount}
                    posts={this.props.posts}
                />
            </div>
        </div>
        );
    }
}

Я жестко запрограммировал rowCount, так как знаю, что в моем массиве сообщений на данный момент есть 10 элементов.Просто для контекста, это был мой оригинальный код, который успешно отображает весь список.

renderPosts() {
    return this.props.posts.map(post => {
        return (
            <PostItem key={post._id} post={post}/>
        );
    })
}

render() {
    return (
        <div className="ui container">
            <div id="postListContainer" className="ui relaxed list">
                {this.renderPosts()}
            </div>
        </div>
        );
    }
}

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я не могу получить доступ к реквизитам, передаваемым в этот компонент, из моей функции rowRenderer, поэтому она дает мне неопределенную ошибку.Итак, мой вопрос, как мне получить доступ к реквизитам постов в функции rowRenderer?Я просто пытаюсь вернуть компонент PostItem для каждого сообщения в массиве сообщений.

Answer 1

Подпись для rowRenderer выглядит следующим образом:

function rowRenderer ({
  index,       // Index of row
  isScrolling, // The List is currently being scrolled
  isVisible,   // This row is visible within the List (eg it is not an overscanned row)
  key,         // Unique key within array of rendered rows
  parent,      // Reference to the parent List (instance)
  style        // Style object to be applied to row (to position it);
               // This must be passed through to the rendered row element.
}) { .. }

Таким образом, вы не получите доступ к реквизиту через аргументы.Вы можете получить доступ к реквизиту через переменную экземпляра, this.

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

<List 
    ...
    rowRenderer={this.rowRenderer.bind(this)}
/>

затем внутри rowRenderer простой доступ this.props.posts