reactjs - 如何在 ReactJS 中突出显示树中的焦点节点？

Question

假设我们有一个渲染为 DOM 树的树结构，如下所示：

<ul>
    <li>Outer
        <ul>
            <li>Inner
                <ul>
                    <li>Inner Inner</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我们要突出“focused”（鼠标悬停）节点，这里的重点是，当一个 Inner 节点被突出显示时，它的父节点不应该被突出显示。

使用 jQuery，您可以访问父节点，解决方案非常简单http://jsfiddle.net/D7jwq/2/：

$("li").mouseover(function(e) {
    $(this).addClass("red").parents().removeClass("red");
    e.stopPropagation();
}).mouseout(function(e) {
    $(this).removeClass("red");
});

但是如何在 ReactJS 中获得类似的效果呢？

标签： reactjs

Answer 1

React 也有 mouseover 和 mouseout 事件https://reactjs.org/docs/events.html

jquery$("li")隐式地将这些事件设置为所有<li>元素。

在 React 中，您必须将这些事件显式设置为您的<li>元素。