如果li在react功能组件中具有活动类,如何将类添加到父元素ul

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如果li在react功能组件中具有活动类,如何将类添加到父元素ul相关的知识,希望对你有一定的参考价值。

[请在下面的html结构中找到。如果任何一个li具有活动的类,我想将类添加到父范围。

<span class="caret menus">Test</span>
<ul class="nested">
    <li>
        <a>Test1</a>
    </li>
    <li>
        <a>Test2</a>
    </li>
    <li>
        <a>Test3</a>
    </li>
    <li>
        <a class="active">Test4</a>
    </li>
</ul>

我尝试使用下面的代码,但是只有我才能遍历直到嵌套。

var selected = document.querySelector('ul li a.active');
var close = selected && selected.closest('.nested');

请帮助解决此功能组件中的问题。

答案

如果要从结构中选择跨度,则可以使用.previousElementSibling

.previousElementSibling
另一答案

var selected = document.querySelector('ul li a.active'); var close = selected && selected.closest('.nested').previousElementSibling; console.log(close)// returns span element span的兄弟姐妹,而不是您获得的ul的兄弟姐妹。您需要在HTML结构中向上导航才能获得它:

a
var selected = document.querySelector('ul li a.active');
var span = selected && selected.parentElement.parentElement.previousElementSibling;
if (span) span.classList.add('nested');
span.nested, li a.active {
  color: blue
}

以上是关于如果li在react功能组件中具有活动类,如何将类添加到父元素ul的主要内容,如果未能解决你的问题,请参考以下文章

如何将类组件转换为功能组件?

反应:从类转换为具有状态的功能组件

如何将类组件重写为 React Functional?

如何将类组件转换为功能组件?

将类重构为 React 中的功能组件

将类组件转换为功能组件