基于过滤数据的React表中的动态页脚

Question

是否有一种方法可以基于过滤后的数据更新React-Table中的页脚？我正尝试放置一个对列进行求和并随数据过滤而变化的页脚。

***更新： 我在下面添加了有关如何使它工作的答案。您还可以在这里查看我的工作表的完整代码： https://github.com/travisdock/pf-frontend/blob/master/src/components/table.js

Answer 1

当然有！ 只需将state属性用作页脚的内容即可。现在，如果您更改状态的这一部分，则react将再次渲染使用该状态属性的所有组件。有关更多信息，请阅读react文档中的“ State and Lifecycle”。

Answer 2

对于任何好奇我最终如何做到的人，这里是我的代码：

Footer: columnProps => {
        return(
          <span>
            {columnProps.data.length > 0 ? this.sumEntries(columnProps.data) : 0}<br></br>
            {columnProps.data.length > 0 ? this.averageEntries(columnProps.data) : 0}
          </span>
        )
      }

事实证明，页脚可以接收columnProps的道具，该道具的当前数据显示在表中，并在过滤器更改数据时更新。我在页脚的两行中添加了总计和平均值，效果很好。