javascript - 在reactjs中悬停时淡入淡出

Question

我正在尝试在 react 中创建组件。我处于学习模式。所以可能我做的完全错误。下面是我的代码

我在 sandbx 上的代码

https://codesandbox.io/s/pedantic-bush-roiv6?fontsize=14&hidenavigation=1&theme=dark

class MegaMenu extends React.Component {
  public render() {
    return (
      <div className={styles.MegaMenu}>
        <div className={styles["menu-container"]}>
          <div className={styles.menu}>
            <MenuList Options={menus} />
          </div>
        </div>
      </div>
    )
  }
}

const MenuList = (props: IMenuListProps) => {
  return (
    <ul>
      {
        props.Options.map((Option: IMenu, index: number) => (
          <li key={index} className={(Option.subitem && Option.subitem.length > 0) ? styles["menu-dropdown-icon"] : styles["normal-sub"]}>
            <a href={Option.link}>{Option.name}</a>
            {/* Base Case */}
            {
              (Option.subitem && Option.subitem.length > 0) &&
              <MenuList Options={Option.subitem} />
            }
          </li>
        ))
      }
    </ul>
  )
}

如果喜欢有 child ，我正在尝试像 jQuery 那样的东西

$(".menu > ul > li").hover(
        function (e) {
            if ($(window).width() > 943) {
                $(this).children("ul").fadeIn(150);
                e.preventDefault();
            }
        }, function (e) {
            if ($(window).width() > 943) {
                $(this).children("ul").fadeOut(150);
                e.preventDefault();
            }
        }
    );

我们可以如何做 react 。

Answer 1

这并不是解决您问题的完整答案，只是您可能想要采取的一些方向:

我要做的是 <MenuList>一个有状态的组件而不是功能性的组件，并存储一些关于它是否被悬停的状态。关于<ul>做一个onMouseEnter设置悬停状态和 onMouseLeave 的回调取消设置它的回调(将其设置为 false)，并将 prop 传递给下一个 MenuList关于是否应该显示。

您可以选择多种选项来处理该 Prop 。如果不需要动画，您可以简单地添加 style属性(property)ul如果props.show === true :

let styles = {};
if (this.props.show) {
  styles = {display:block}
}
...
<ul style={styles}>
...

如果需要动画......那么祝你好运。