reactjs 材质UI:访问组件中的子节点< List>

lbsnaicq  于 2023-06-05  发布在  React
关注(0)|答案(1)|浏览(104)

让我们假设我有一个隐藏的购物车,只有当我点击商店中的购物车图标时才会呈现。当购物车呈现时,在它里面我有一个List组件,在它里面我有三个孩子(让我们假设这些是我添加到购物车的项目):

<List >
    <p>item1</p>
    <p>item2</p>
    <p>item3</p>
</List>

我需要知道在任何时候有多少项目,我在名单上,这样我就可以显示一个小徽章上的车图标,在车中的项目数量。我在Material UI文档中读到List有一个“children” prop ,它是一个子组件的数组,但我对如何访问它感到非常困惑,我想知道即使在购物车没有呈现的情况下,它是否也会跟踪该数组。

dgsult0t

dgsult0t1#

在构造函数中为列表创建一个ref,并以编程方式在渲染中或在必要时计算子长度。

constructor(props) {
   this.listboxRef = React.createRef();
}

<List ref={this.listboxRef}>
   <p>item1</p>
   <p>item2</p>
   <p>item3</p>
</List>

var cartCount = this.listboxRef.children().length;

相关问题