reactjs - Material UI：访问子节点零件

Question

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

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

我需要随时知道列表中有多少物品，以便我可以在购物车图标上显示一个小徽章，以及购物车中的物品数量。我在 Material UI 文档中读到 List 有一个“children” prop，它是一组子组件，但我对如何访问它感到很困惑，我想知道它是否会跟踪该数组，即使购物车是未渲​​染。

标签： reactjsmaterial-uimaterial-designreact-material

Answer 1

为构造函数内的列表创建一个 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;