我试图使与之反应,虚拟卡列表。该特定组件上的posts数据作为prop从父级传递。这是我当前在组件类中拥有的。
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进行了硬编码,因为我知道我的posts数组中目前有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函数中的posts道具?我只是想为posts属性数组中的每个帖子返回一个PostItem组件。
答案 0 :(得分:0)
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
的访问权限
答案 1 :(得分:0)
您可以使用rowRenderer中接收的父级,通过rowRenderer方法访问从List标记发送的属性。结帐签名here
<ReactTags
.
.
handleDelete={ this.handleDelete }
/>
那应该可以解决您的问题。您还可以通过将该变量绑定到rowrenderer方法或ES6语法来访问道具
rowRenderer ({ index, key, style, parent }) {
const posts = parent.props.posts;
if (!posts) {
return <div></div>
} else {
return (
<PostItem key={key} style={style} post={posts[index]}/>
);
}
}