javascript - 获取组件数组的长度

Question

目前正在尝试学习 React。我有一个组件可以根据一些过滤器返回一些海报，我将如何读取呈现的海报数组的长度？

这样我就可以创建一个标题，例如“显示 6/10 海报”

render() {
        return (
            <div className="App">
                <Title />
                    <Posters
                        selectedGenre={this.state.genre}
                        selectedCategory={this.state.category}
                        titles={this.state.titles}
                    />
            </div>
        );
    }

我正在考虑在 render() 中嵌入 Posters 函数，这样我就可以做类似的事情:const posters = this.state.titles.map(title=>...) 然后 const filteredPosters = posters.length。但是试图找到一种分离逻辑的方法

感谢您的帮助。

Answer 1

正如我在评论中指出的那样，让您的 header 成为 <Posters /> 的一部分组件并使用 Prop 来提供总数/过滤后的数字:

class Posters extends React.Component {
  render() {
    const { titles } = this.state;
    const filteredTitles = this.filterTitles(titles);

    return
    <>
      <Header totalSize={titles.length} displayedSize={filteredTitles.length} />
      {filteredTitles.map(title => <Poster title={title} />)}
    </>
  }
}