React - 重新渲染一个单独的(非子代码)组件

时间:2016-10-14 08:37:24

标签: reactjs

我的应用会显示服务提供的所有图书,并且我希望有一个搜索栏来搜索特定的图书。

我有两个主要组成部分:NavPanelMainPanelNavPanel有一个子组件SearchBarMainPanel有一个子组件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()并获得修改后的数组。我怎么能这样做?

2 个答案:

答案 0 :(得分:1)

要影响另一个组件,您应该使用道具,这是您可以尝试的

  1. 将书籍作为道具传递给Books Component。
  2. 当有人搜索时,更新图书数据,因此书籍组件会在图书数据更新后呈现。
  3. 如果你使用的是Redux,它很容易访问道具并修改道具数据,

    否则将书籍数据存储在Top Container State中并传递一个功能来搜索组件以更新带有搜索书籍的顶级Container的状态。 并将相同的状态传递给书籍组件作为道具

答案 1 :(得分:0)

如果您不想将道具传递给组件,请在组件上使用ref(例如ref="books")并执行此操作:

this.refs.books.forceUpdate();

无论如何,我建议使用redux,将你的书籍保存在redux reducer中,然后你可以在应用程序的任何地方更新书籍。