我正在构建一个REACT应用,该应用将显示针对各种餐厅的一些建议。 主要组件有两个称为 1. handleLiked
handleLiked = () => {
console.log("in like");
}
handleDisliked = () => {
console.log("in like");
}
我将状态和这两个处理程序从MainComponent.js
传递到Listings.js
<Listings listings={this.state.listings} city={this.state.selectedCity} likedCounter={this.handleLiked} dislikedCounter={this.handleDisliked}/>
Listings.js是一个功能组件,我收到了道具。 如果我console.log(props) 我可以看到处理程序。
在Listings.js中,我对状态中的记录运行一个循环,并将数据传递给名为Listing.js的子组件。我有一个for循环,它对名为Listing的子组件生成以下调用。
return <Listing
key={listing.key}
listingTitle={listing.listingTitle}
listingCity={listing.listingCity}
listingBodyText={listing.listingBodyText}
listingLikes={listing.likes}
listingDislikes={listing.dislikes}
listingLikesHandler={listing.likedCounter}
listingDislikesHandler={listing.dislikedCounter}
/>
当我在Listing.js中收到道具时,我可以看到所有属性,例如city,bodytext等,但是处理程序变得不确定。您能否帮我理解如何在我的示例中将它们传递给Listing组件。