Question

<ul className="menu">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
   <li class="hidden">Hidden when screen size is of mobile</li>
   <li>4 li item</li>
</ul>

我希望不算数。 <li>。因此，当屏幕尺寸从桌面变为移动时，计数应减少1，总计为3 active <li>。

document.getElementByClassName（'menu'）。长度不起作用。

Jquery也是一种选择，但是有做出反应的方式。

我有一系列我想要显示的照片，但是只能显示7并且休息应该在点击时显示。现在当屏幕尺寸变为移动时，只有3可以显示休息onclick。它类似于：7 + 1（b）用于桌面，3 + 1（b）用于移动设备。 b持有号码。剩下的照片。

Answer 1

如果您将.menu元素附加到ref，则可以在不使用查询选择器的情况下检索它，从而保持组件的隔离。

ref到位

<ul ref={el => this.menu = el} className"...">

然后你可以做

this.menu.childNodes.length

文档链接：

React Ref属性：https://facebook.github.io/react/docs/refs-and-the-dom.html
ChildNodes：https://www.w3schools.com/jsref/prop_node_childnodes.asp

如何计算ul的活动子元素的反应？

1 个答案: