在reactjs中懸停時淡入淡出

Question

我正在嘗試在反應中創建組件。 我在學習模式。 所以可能我做的完全錯了。 下面是我的代碼

My Code on 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>
  )
}

如果有孩子，我正在嘗試 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();
            }
        }
    );

我們如何做出反應。

Answer 1

這不是解決您問題的完整答案，只是您可能想要采取的一些方向：

我要做的是使<MenuList>成為有狀態組件而不是功能組件，並存儲一些關於它是否被懸停的狀態。 在<ul>上執行一個設置懸停狀態的onMouseEnter回調和一個onMouseLeave設置它（將其設置為 false）的 onMouseLeave 回調，並將一個關於它是否應該顯示的道具傳遞給下一個MenuList 。

您可以選擇多種選項來處理該道具。 如果不需要動畫，您可以在props.show === true的情況下簡單地向ul添加style屬性：

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

如果需要動畫……那么祝你好運。