我的应用会显示服务提供的所有图书,并且我希望有一个搜索栏来搜索特定的图书。
我有两个主要组成部分:NavPanel
和MainPanel
。 NavPanel
有一个子组件SearchBar
,MainPanel
有一个子组件Books
。它们没有直接关系。
Books
显示所有图书并SearchBar
搜索特定图书。
我有一个名为BooksService
的服务,提供一系列书籍,还有一些方法:
export default function BooksService() {
return {
reset: function() {
// resets the array
}
getBooks: function() {
return books; // array
},
filterBooks: function(filter) {
books = books.filter( book => book.author.toLowerCase().includes(filter.toLowerCase()) || book.title.toLowerCase().includes(filter.toLowerCase()));
}
}
}
加载页面Books
组件调用BooksService().getBooks()
以获取所有图书。当您在SearchBar
组件中搜索书籍时,会调用BooksService().filterBooks(filter)
来修改数组。
现在我希望Books
重新投降。它会触发BooksService().getBooks()
并获得修改后的数组。我怎么能这样做?
答案 0 :(得分:1)
要影响另一个组件,您应该使用道具,这是您可以尝试的
如果你使用的是Redux,它很容易访问道具并修改道具数据,
否则将书籍数据存储在Top Container State中并传递一个功能来搜索组件以更新带有搜索书籍的顶级Container的状态。 并将相同的状态传递给书籍组件作为道具
答案 1 :(得分:0)
如果您不想将道具传递给组件,请在组件上使用ref(例如ref="books"
)并执行此操作:
this.refs.books.forceUpdate();
无论如何,我建议使用redux,将你的书籍保存在redux reducer中,然后你可以在应用程序的任何地方更新书籍。